The panelists talk about browser tools and extensions.

On YouTube
130 JSJ Browser Tools and Extensions

 

I’ll get really close to the mic to emphasize the bass.

Hey everybody and welcome to episode 130 of the JavaScript Jabber Show. This week on our panel, we have Dave Smith.

Hello world.

Jamison Dance.

Hi friends.

AJ O’Neal.

Yo, yo, yo, coming at you live yet again from San Mateo, California.

Joe Eames.

Hey everybody.

I’m Charles Max Wood from DevChat.TV. And I just have to point out that AJ, every time he’s on, says “Hey, coming at you live,” and he’s never coming at you live.

Never once have we ever been live.

We’ve not ever done a live show.

I’m here, right now.

Why? If he’s just not in person.

Yeah.

He’s live and in person. And we recorded this a week ago when you’re getting this.

Oh, I see. Not actually live. Totally not live.

Well, maybe he’s saying that he is alive at the moment they listen to the show, but that seems like a promise that he may not be able to guarantee.

I wish he could.

It depends how the show goes.

Trying to use bluebird.

Chuck, do you have a cold?

I have a cold. I may not talk a lot.

You sound like you have a cold.

Yeah. My voice is kind of going away. So yeah, so I may just let you guys talk. But we’ll see. I always have something to say, so I might just rasp it out.

So, do you want to kick out our topic today?

Yeah. Let’s talk about browser tools and extensions.

Yay.

So, I want to start off on a tangent.

You want to introduce the topic? Yeah.

Yeah.

We’re talking about this. Alright, let’s get on a tangent.

This was part of my plan to talk about my favorite thing in the world, which is DotA. Just kidding. [Laughter]

So, I sit right now by a bunch of iOS developers.

Ooh.

And it’s really interesting to see the contrast between the workflow of iOS developers and the general web developer workflow. And they’re fantastic developers. They’re some of the brightest people I’ve ever worked with.

Do you mean the edit, compile, test workflow?

No, just more like how much space in their brain Xcode takes up and interface builder.

Oh.

Their work is dominated to a way I feel like web development isn’t by interacting with tools that make them more efficient. And there’s a lot of yak shaving involved in that, too. But it’s just a really interesting contrast for me where I feel like I’m typing or staring at a webpage or looking at a debugger in the console or something, but they’re reading up on preferences in Xcode and trying to find cool, hidden features like…

That dramatically increase their efficiency that were already there that they just didn’t know about.

You know what that makes me think of, Jamison?

What?

That they are like Sigourney Weaver and the Aliens in that load lifter thing at the very end and you…

Where she fights the alien in it?

Yeah. And Jamison is the mother alien. Just raw strength and natural power where they’re using… [Laughter]

No tools required.

Yeah. [Laughter]

That’s what this is.

But Joe, really if you could choose, wouldn’t you go with the robot thing? I know I would.

I kind of would. [Inaudible]

How awesome is that?

Yeah.

Well yeah, so now it’s kind of…

Especially if Jamison’s trained to implant some egg in your chest or something. [Chuckles]

Oh yeah.

I think the mother alien just straight up murders people. She’s not a…

She’s not up for a good planting.

Yeah, she’s past that phase. But I bring that up to say that first, because I wanted to hear your analogy about Aliens. But secondly because… [Chuckles]

You got it.

I feel like that’s something I personally could do better, is spend more time obsessing about the tools I use and trying to eke out little efficiencies and stuff.

Yeah. You know, as web developers we have so much choice in our tools.

Yeah. It’s maybe a lot broader knowledge but less deep about specific tools.

Even our platform where we execute our code is a choice, you know?

Yeah.

iOS developers, they pretty much have to use iOS. We can use almost any operating system and half dozen browsers.

Yeah, and to play into the stereotype, my options, I can use Emacs or I can use Emacs. [Chuckles]

Or I can use Emacs. You know, because it does everything.

[Chuckles] Is it a browser too?

Can be.

Does it come with that smug, superior attitude included or do you have to install that separately?

It’s part of the license.

Okay.

So Jamison, here’s your challenge then. For the next week, you can’t do anything if you don’t do it inside either Grunt or Gulp. [Laughter]

Let’s talk about browser tools. I’m actually pretty excited about this topic, because every once in a while I take time away from my own desk and shoulder surf other people. And I always learn something about, “Oh, I didn’t know you could do that,” or, “I didn’t know that tool existed.”

Level two of that is called pair programming.

Yeah, yeah exactly. I don’t do that very much.

I guess we could just start off talking about the built-in developer tools in every browser. All the browsers have them. I use Chrome so I know theirs the best. But I know Safari and Firefox and IE all have their dev tools.

Yeah.

Do we want to talk about specific features of those?

Do you know that they have dev tools? Because I don’t know that they have dev tools.

I do know.

They do.

I do know that those three that were mentioned do have dev tools.

Yes.

So Dave, tell us about this unheard of dev tools? Why would anybody use them?

I’m going to state an opinion that might get me a little bit in trouble. But here’s basically why anyone would use them. They are almost as good as Chrome’s dev tools. [Laughter]

Well, that’s a good start because if the browser doesn’t use all 16 gigs of RAM and I can debug with it, that’s a bonus.

The built-in dev tools in Firefox have gotten really good. I’ve been super happy with them. There are just a few little things I find myself not being able to do. But largely, they’re pretty good. I’ve been pretty happy with them.

Okay. So, two things I’ve noticed about Firefox dev tools. One, when you have some sort of flow where a window closes like OAuth, the developer console still stays open in Firefox, which is very nice as opposed to Chrome.

Oh, yeah.

When the window closes, it closes so you lose that opportunity to debug.

Oh. What can you do with the dev tools on a closed window?

I don’t know because I haven’t actually needed to do…

Is it just like null pointer exceptions all over the place?

I don’t know. I just used it to see that things took place correctly. And it turned out that when I was using Firefox…

Oh.

I no longer had problems at that point.

So for example, you could post mortem your console output and see if everything happened the way you thought. Is that the idea?

Yes. Yes.

Okay.

Because when you’re doing OAuth and you have these refreshes…

Oh yeah.

And the closing windows, that’s really annoying if you lose that and you’re trying to debug that the correct values get passed to the window like I was expecting, kind of thing.

That’s super cool. Alright, I’ll put one point on the scoreboard for Firefox on the official score.

Pro tip.

Another point for Firefox is if you’re doing anything with the web audio API, Jordan Santell and some other people with him are working on developer tools that visualize the graph of nodes in the web audio API and let you manipulate them graphically, which is super cool.

Cool.

Alright. So, I’m just going to throw out a random tip that I discovered probably a couple of years ago, but it seems like a lot of people I run into don’t know about it. It’s, in Chrome when you have the developer tools open on the network tab, this is the tab that shows all of the HTTP requests that the browser is doing, there is a little checkbox at the top of that called preserve log. About a year ago, it was just a red circle. And that red circle now means something else. But now it says preserve log.

And the reason this is cool is because if you have a page navigation in the middle of your app for whatever reason, like a window.location change, by default Chrome will clear out all of your HTTP request history out of that panel. And it’s gone. But if you have the preserve log checked, it will keep it. And that’s really handy if you have a redirect in your app, so it’s bouncing between pages or something, and you want to see what the heck it was doing before it redirected. It can be frustrating when your history disappears. But with that checkbox it will stay.

Oh, very nice.

Yeah. Where’s that bad boy?

On the network panel, it’s right at the top, right under the word network actually…

Oh yeah.

On my display. Preserve log.

So, Firefox also has that feature. But they have another feature which is I think more like by default log your requests at all. It just shows that it happened, but it doesn’t show you the body or the contents or any debugging information that would be useful.

Oh, okay. [Chuckles] Alright.

So, one thing I want to talk about is just basically in all of these different tools including IE I might point out, they all have some features in common. One of them is that you can set breakpoint. And then you can inspect the state of the world. So, you can see what the different variables are, what their values are.

Yeah.

What the objects are. You can drill down into them. You can see what values have been closed over. You can see what values are within the current closure or which ones are global. And so, just some general browsing functionality that you can get that you would probably be used to using in an IDE.

Yeah.

If you’re used to that in other languages. But in this case, it’s just built into the browser so you can actually get a handle on what’s going on in your program at any given point.

So, if you haven’t used that feature before, I found in Chrome it’s a little bit non-intuitive to locate it.

You guys tell me if you have the same experience, but it’s under the sources tab, right?

Mmhmm.

That’s how you access your code, your source code.

Your breakpoints, yeah.

So, if you want to put in a breakpoint, you have to click sources and then you open the source file.

And then you click in the gutter where the numbers are.

Yeah.

For the line numbers.

Yeah. The most important thing there is to know that the Ctrl + O keystroke lets you find the script file you’re looking for.

Yes, yes.

Super important. But the much easier way to do that is to just put in a debugger statement in your code and then have it open up for you and then set the breakpoint and take your debugger statement out and then do it again. And now you have the breakpoint where you want it rather than trying to find it in your code.

Yeah.

Because it’s usually way too big of a pain in the butt to find it. That’s my complaint.

Yeah. Yeah, it’s true.

How do you put a debugger statement in there?

Just the word debugger, D-E-B-U-G-G-E-R. You put that anywhere. It’s a JavaScript command and it will just launch the debugger in browsers.

Ooh, I just learned something.

Yeah, and I think that works in Node as well, right?

Does it really though? That’s awesome if it does.

What does it do in Node? I actually don’t know.

I don’t know. We’re going to need verification.

Let me open up my terminal here.

If only we had Tim Caswell on the show. [Chuckles]

So, I have a question while AJ is checking out the debugging thing. There’s a little async checkbox on the call stack in the Chrome dev tools. Does that preserve the call stack through async operations? Is that what that does?

Ooh, I don’t know.

I’m going to give you a completely honest answer. I have no clue.

I believe…

I’m going to assume it does. And if so, that is rad.

The googles have the answer. It is a powerful feature that makes JavaScript, oh wait no, that’s something else. [Chuckles]

Yes.

Both Chrome and Firefox added long stack traces.

That’s cool.

You can view the full call stack of asynchronous JavaScript callbacks.

Fancy.

Ooh.

That’s way cool, because that’s a big pain sometimes.

Yeah. So, to explain what we’re talking about here. Imagine if you did an AJAX request and that AJAX request was initiated and it had a call stack at the time it was initiating. But when it returns, that call stack is lost. So, when you get a breakpoint or something that would cause your debugger to come up, you can’t tell who started this AJAX request. You can just say, oh it’ll just show, oh this came from some internal thing, right? But yeah, with that apparently, it will show the full initiation sequence of how you got here, which is really cool. I might use that.

Yeah, because that’s a problem that’s super common with Angular, jQuery, any framework, because the AJAX stuff is so far down in the framework code that you [inaudible]

Yeah. Even if you’re not using a framework, I think it’s still a problem, right?

Yeah, it can be.

Some promise libraries support this. But generally, it’s opt-in and it generally comes at the cost of higher memory or CPU usage. So, the fact that your dev tools could do this really nice, because that way you can not worry about the efficiency hit by leaving that in, in production or something.

And then when you’re debugging you just turn it on.

Super cool. While we’re talking about breakpoints, there’s another thing that I found really useful. We’ve just been talking about breakpoints in your JavaScript code. But you can also put breakpoints in your DOM. So, you can say any time someone modifies an attribute on this element, make it a breakpoint and then you can see what JavaScript is doing that and figure out why that just happened.

You can do attribute modifications, [inaudible] modifications, or node removal in Chrome.

Yeah, really cool.

Does Firefox do the same thing? Let’s find out. I’m not seeing a break on it in Firefox.

One point for Chrome on the official scoreboard.

Yeah.

Firefox will let me delete the node though.

So, bad news for Node. When you statement, it does nothing.

Debugger?

The debugger statement is ignored?

Yup, yeah.

I wonder if you have to run Node in a certain mode to get it.

Yeah, that’s true.

Let’s do Node [inaudible]

I actually do very little Node development. So, anything I say should be…

Jamison’s our Node expert.

So, AJ is, too. Node has a debugger mode. The only way I’ve ever used it is to hook it up to the Chrome debugger. But I imagine if you run it with a debugger thing, the debug flag enabled, that the debug command in your JavaScript will do something different. I want to stop talking about things I don’t know about yet, though.

Do you do Node Inspector?

No. I’ve used it a couple of times but I used Jamison Inspector. That’s where I just look at the code and put in print lines and then sit and think.

Thank you for saying that, because I feel so low rent that I do that. [Chuckles]

Low rent.

Jamison Inspector?

So, there’s a book called ‘Coders at Work’ and it has interviews with a lot of famous successful software developers from anywhere from the beginning of computers to the 80s and 90s.

Cool.

And it seems like it’s a pretty even split between people who use debuggers and people who use print lines.

Oh, interesting.

And it’s like Donald Knuth, right? It’s these super brilliant successful technically accomplished people. It’s also a pretty even split between testing and not testing, too.

Wow.

Which might rustle some jimmies, but…

I’m so glad to hear that, because I’ve really been a print line debugger predominantly in my life.

Well, you and Donald Knuth.

Oh, he and I are buds now.

Yeah.

For me, I tend to do the same thing. So, I put alert when I’m debugging in the browser.

Oh, that’s low-rent. Come on.

You do alert?

Whoa.

Or console.log. I’ve done both.

We’re not friends anymore.

Alert is my debug statement too, because it halts execution and I’ll have…

Right. [Chuckles]

Oh, Donald Knuth is so ashamed of you. [Chuckles]

But the thing is that sometimes I really do need to just stop and inspect stuff. So then, I will go use the debugger.

Debugger statement, the debugger statement. That’s your friend now.

Yeah, it is now. But yeah, because then I can just put it in where I want to halt the world and see what’s going on. But the thing is that it’s usually a situational thing. And if I can’t find the problem within a few console.logs or alerts…

Yeah.

Then it’s like, “Okay, I’m just going to stop and I’m going to step through it and figure out where it’s breaking.”

Yeah.

So, there’s definitely application for both. I have to say, one thing that Chrome web tools does that drives me absolutely bonkers, and I don’t know if the other browsers have this problem, but if you don’t have the dev tools open when you hit an error, you don’t get a backtrace. It makes me so angry.

Oh. I didn’t know it did that.

I’m like, “Oh, I got to go and freaking reload because it didn’t show up.” Yeah, now you know.

Yeah. That’s interesting. Yeah, I almost always just keep them open for that reason, and also because it also doesn’t collect network requests.

Yeah.

When it’s not open. So, I just keep it open.

Yeah, that’s annoying.

Go ahead, Joe.

I am excited though that Chrome recently added the emulation thing to it. It was only in Canary, if you guys have seen that.

Yeah, that’s amazing. Do you want to talk about it?

Yeah. What was funny is I read this somewhere. I think I was looking at a course on hybrid development and they were talking about, “Oh, get Canary so that you could have emulation mode so that you could emulate at least the screen size of different devices.” And they have in there builtin a gazillion different devices. And you can just pick the device and it will put your browser as if it were that screen size and give you rulers and things that you can see what the website looks like in that browser. And I did that and downloaded Canary and then all of a sudden it was showing up in my regular Chrome. And I thought, “Wow. Did Canary add a tool to Chrome?” But no, they just released it for Chrome.

And it’s this little, in the upper left corner in your developer tools right next to the little magnifying glass is now a little thing that looks like a small phone. And that’s the emulation for devices.

Oh, that looks really good. Yeah, great job Google.

Yeah. Google’s doing something nice.

This is really cool.

Yeah.

I have clicked that before and it didn’t look this cool last time. [Chuckles]

This is really nice.

So, another really cool feature that we haven’t talked about in the Chrome dev tools is the timeline view, which shows you, you can view the memory usage and basically frames per second and painting performance and stuff like that, as you manipulate your web app. And it’s really helpful for debugging memory leaks and performance problems, like issues with janky scrolling or clunky animations, or things like that.

So, I have to say that every time I go in there and use it, it’s like learning the entire set of tools again.

Yeah, I’ve had the same experience.

Where they change it all the time, you mean?

Well, it changes a lot and it’s really complicated, too.

Yeah.

It’s got a lot of moving parts. You know, I just tried it again for the first time in a while and it looks awesome. I think they made it better.

[Chuckles] It’s like they’re working on it.

Like you said, it just so many moving parts that I feel like if I’m not using it every day, I’m only using it a few times a year, half a dozen times a year, something like that. Every time I open it up I feel like I got to learn this entire tool again. I don’t remember how I did this before and it’s so complex.

Maybe that means you should be using it more, Joe.

That may mean that.

That’s what it means for me.

That may mean that.

So, the patron saint of browser developer tools is Addy Osmani.

Right.

He’s a Google employee so he’s biased towards Chrome dev tools. But if you want to keep up on all the haps with the browser tools, he’s the person that you follow on Twitter, or read his blog articles or whatever.

Yeah.

He has really good info on how to use them.

What is the name of that process where somebody actually becomes a saint in the Catholic Church? What’s that?

Oh, I don’t know.

Saint-ification?

Maybe that’s it. I don’t know. There’s definitely a term for it.

I’m just wondering if it’s been official yet for Addy.

Canonized.

Canonized.

Yes, they are canonized.

Yes.

Yeah, I think he’s been canonized at Google.

I believe he has.

So, I have a little story about the timeline view. About two years ago we were just getting into AngularJS at my job. And we were really using it extensively. And we used it kind of recklessly and without really being careful about performance at all. And after about three or four months we realized that some of our pages were slow and janky. And I opened up the timeline view for the first time. I hadn’t really used it. Every single entry on the timeline was the digest loop.

And that’s where I got to learn what the Angular digest loop was a [chuckles] couple of years ago. [Chuckles]

So, it wasn’t terribly helpful but it pointed me in exactly the right direction, like “Your digests are slow.” It couldn’t tell me why but it could tell me that that’s what it was. And that was pretty cool.

That’s nice.

So, I wanted to take a step back for just a second. I heard somebody was mentioning about the little phone icon in Chrome and how it lets you have a nice mobile application. Take a look at the one that Firefox has. It’s the icon that’s not as clear. The icon looks like square inside of a larger border, maybe a little dot by it.

Is it the one that says responsive design mode in the tooltip?

Yes.

And it’s got a dropdown. Oh.

But that one…

This isn’t as cool.

No. [Chuckles]

Well, the new Chrome one has a lot more gizmos on it. But the old Chrome one wasn’t very usable, the one from six months ago. But the one in Firefox is very simple, very clean, very easy to understand. I really liked it when I first saw it. And then somebody showed me the one in Chrome and I didn’t really use it because it wasn’t as good at the time. Of course…

How do I add a custom size to it?

You just pull it out. See the dropdown where you could…

So you could drag it and then it says custom. Oh, and then you say add preset and you can name it.

Oh, add preset.

Yup.

Oh, that’s cool. Thanks, AJ.

And Firefox OS I think is probably the inspiration for Firefox having such great mobile development tools quicker.

Okay. And here’s something cool too, AJ, on that same feature. There’s a little camera icon right there. Do you see that?

Yeah. You can take a screenshot.

And you click it and it takes a screenshot and just saves it to your downloads folder instantly.

Yup.

That’s very convenient.

But it’s cool because it gets the right dimensions. So, it gets exactly the content area.

And it has the touch event simulator.

Oh, hello.

I don’t know if the Chrome one has that or not.

You know, this is a pro tip for anybody on a Windows box, the whole one note screen capture, I feel like this makes some of the things like that completely unnecessary because I can just capture just the area that I want, super easy. Is there a tool like that for the Mac?

Where you can click and drag a window, an area?

Yup, yeah, screen cap.

Yeah. You have to hold Ctrl, Command Shift and 4

Yup, Command Shift 4. [Chuckles]

And if you hit space, then it’ll capture the whole window.

Yeah.

Alright. Okay, I remember that now.

Okay.

No, I was just saying it’s been a long time since I’ve serious amounts of work on my Mac. I use my, I still use my Mac. But I don’t do nearly as serious stuff as I used to a while ago.

Let’s talk about the JavaScript console.

Yes.

Do you guys use this?

I do.

All the time.

Yes.

I probably use this more than any other dev tool built into the browser.

We’re console loggers. I usually try to create a macro on every editor that I use that cl is console.log.

Oh, cool. And then in the console itself, there’s a bunch of cool tools, too.

So, I want to throw out a tip, console.dir, D-I-R.

Console.dir?

Yeah.

Yeah, what is that? Because I’ve seen it, but I’ve never…

It’s when you’re logging out something and log will oftentimes basically, it will toString whatever it is that you throw in there. And so console.dir will force it to basically create, give you an explorable object.

Oh, okay.

So, every time you log and you don’t get an explorable object, try dir instead and you might get the explorable object.

Oh, interesting.

Oh, yeah. Now, this is crazy. This is crazy. You might now know about this. This I think is new. In Chrome, whenever you console.log something it gives you array and then the number of elements in it or object or whatever. If you right click or two finger click and select store as global variable, it gives you a variable…

Oh, my.

AJ: temp1, temp2, temp3.

So, you can explore the object and play with it in the global scope.

Oh my gosh. So, you could, wow. [Chuckles] That’s super cool.

It’s a lifesaver.

Super cool.

So, say you want to call some function on a method, like say it’s in Angular right? Deeply nested scope, you could console.log it but it’s difficult to get at, you can console.log your object variable and then you can call the function that you need that will operate in the scope of that controller.

Yeah, it’s awesome. And it’s as if you just literally declared a global variable and pointed it at that variable in your scope.

Yup.

And so, you can manipulate it and it will be manipulated within the scope that it actually belongs. Oh, super cool. Nice pro tip. Here’s one for you, a little pro tip that I don’t use very often but I saw just recently. Console.table. Have you guys seen this one?

No.

Let’s say you have a REST API that returns an array of objects that all have similar keys, if you console.table that array, you will get a rendered table where Chrome figures out the keys and turns those into column headers and then displays it.

Wow. So, for an array of objects.

Yeah.

Huh.

I’m going to test this out right now.

Yeah.

So, this isn’t fancy or revolutionary or whatever. But the main thing I use the dev console for is when I do dip into a debugger just to poke around it.

Yeah, me too.

The stack and all the variables and things in context, and examine things.

Yeah. People might not know that they’re linked up. But when you’re in a breakpoint, you can open up the console and you can run code in the context of where the breakpoint happened. Now, I can’t get this particular feature to work in Firefox.

The table?

No, what Jamison just talked about.

Oh.

I don’t use Firefox.

Sorry. I use it when I’m doing web audio stuff and that’s about it.

So, for those that do use Firefox, why? What got you back to Firefox?

I don’t think any of us use it as our primary browser.

Oh, yeah.

Oh, it’s just me.

Never?

I never have. I know someone who has. I could ask them later and tell you.

I used to. I went through a transition when I was, even for a Microsoft developer, we quickly had to go Firefox in, I don’t know, it was around 2001 or something like that. And then to use that for our dev tools because it just had superior dev tools at the time. And then a little bit later Chrome, I switched to Chrome because it was a lot faster. And I haven’t switched back but I hear a lot of people saying that Firefox is really back to being as fast as Chrome.

Yeah.

If not faster.

Okay, so here’s a cool console feature as long as we’re still talking about it. I’ve got one particular page in my current app at work that’s really chatty on the console and it logs hundreds of messages when you load the page. At the top of the console, there’s a little funnel icon. It’s gray. And if you click on it, it expands down a little panel below it and it’s got a filter. And you can type text into that filter and only messages that match that text will be displayed in the console. And it truly is just a filter. It’s not a search feature. It filters down the output. So, you can prefix your console messages in your app and then you can filter it down that way. And I think it should be a law that all filters support this. It has a regex checkbox next to it. So, you can do more complicated magic. I’ve been lobbying my congressmen for that.

The one in Firefox [inaudible] regex. Or maybe it does. I don’t know. Let me just try and see. Nope.

So, another random fact about the console is it used to be that when you logged out objects in Chrome, since it kept a reference to the object around, so you could open up the object and examine its properties and stuff, it would keep a reference in memory to that object which could cause problems if you were…

Oh.

Trying to find memory leaks or things like that.

Yeah.

So, now they have a little, I think it’s like a button or a link or something. When you log out an object there’s a thing you can click to say, “Keep this around.” And then it says, “This will be kept in memory.”

Oh.

[That gave] me pretty hard ones when I was doing a demo about debugging memory leaks in JavaScript. And I fixed the code to change the leak and I printed out a variable and it was still there.

I looked really dumb in front of everybody.

But that’s why.

I don’t see that option in the right click menu when I right click on a console.log.

Hmm. Let me use the magic of Google while someone else talks.

Have you had the experience of when you console.log an object and then after the console.log has happened, the object’s value changes? Like say, one of the keys on it changes values. That in the log…

Oh.

DAVE: it retroactively updates to display it, display the new one?

Yeah.

Yes.

Yeah.

Okay, so that’s a pro tip, because if you…

That has killed me before.

Yeah, because you can look at something and you’re actually seeing the new value, not the old value.

Right.

This          is        where           angular.copy           comes          in       really handy.          I         will      often   do console.log(angular.copy(my_object)) and then you’ve got an immutable, or rather it’s immutable at least in the console.

Yeah, I’ve done JSON.stringify [inaudible].

Get a snapshot of it is what you’re saying.

Exactly. Yeah, JSON.stringify would do the same thing. So, keep that in mind with console.log. It can be really frustrating if you don’t know. Although that hasn’t happened to me in a long time. I wonder if Chrome changed its behavior.

No, it happens to me.

Yeah.

I just don’t make those same mistakes as often.

Ah [chuckles]. You guard against it?

I think that’s what I’ve started doing. I’m pretty sure the tool still works the same It’s just I’ve encountered that problem enough that I’ve started rewriting my brain to always…

Yeah, me too. Yeah. Is there anything else we should talk about on the console?

I feel like Chrome recently fixed that, though, where they capture the state when you first examine

it instead of keeping a reference to it.

Well, that would have fixed your demo [chuckles].

Yeah.

I don’t know, because there are some things where you want to get the new state. Like for example, if you just do a jQuery AJAX call it returns an XHR object. If you console.log that, you want to be able to play with it in its current state with the response data, et cetera.

Hmm. Yeah, it definitely could be a feature. It could also be a surprising feature. [Chuckles]

Well, I wanted to ask specifically about what browser extensions you guys are using in addition to the console. I have a few that I use pretty regularly. One of them is Pretty JSON.

Oh yeah, love them.

Oh my gosh.

Yeah.

The only downside is that if, so I’m usually working on a Rails backend. And if it gives a response like an error response or anything that isn’t JSON, then it just gives you the general, “This isn’t valid JSON” instead of showing you the page which usually in the case of Rails gives you some kind of stack trace and other good debugging information.

Oh, yeah.

But other than that, I love it.

Me too. It is so nice. That’s the one that will catch the eye of your coworkers if they see you looking at that one.

Yes, because what it does is it nicely indents and nests your objects.

And it colorizes them, too.

Yes.

Super nice.

So, it’s very, very nice.

So, instead of seeing just a gigantic page full of JSON all minified-looking, you get this explorable, expandable, collapsible color-coded JSON. It’s more of, it looks a lot more like what’s in the Chrome console when you console.log an object. Super nice.

Yeah, you don’t have this wall of text that you have to parse visually. You have…

Yeah.

Other options which is very handy.

I’m glad you brought that up because that’s one that I have installed and I just forget about it. And then every once in a while I browse to one of my API endpoints directly in the address bar and I’m like, “Oh, I love my life.”

What’s the name of that one again? Pretty JSON?

Pretty JSON.

So, I’ve been…

Yeah, I can confirm that yes, if you log out an object and it changes you’ll see the updated value even though it was old when you logged it out.

Okay.

Maybe with the magic of editing, Chuck can make it…

It depends.

Go away so I don’t sound dumb. [Chuckles]

It actually depends. If your object’s small enough that it can just basically write it out as text and write the whole entire thing out in the console, it will. But if it’s so big it gives you a little explore where you have to click the little arrow and it opens up and expands, then that is the live value. You’re just looking at the live object, or at least a pointer to the live object, right? So, it captures the live object at that time.

Yup.

Whereas if it’s very small, if it’s an object with just two or three properties, then it just writes the whole thing out there and then it’s basically just, it’s almost like toString at that point.

Oh, interesting. So, it’s actually really tricky.

Yeah, it is tricky.

You can’t tell whether it’s going to do that or not.

Yeah, you can’t guarantee it one way or the other.

Alright. I have an extension that I really like. It’s called EditThisCookie. And it puts a little cookie icon in your Chrome toolbar. And when you click it, it shows you all the cookies that this particular website has written. And you could edit them right there inline in a little popover UI that’s super nice. And you can delete them. So, if you’re playing with your app and you’ve got a session cookie or something, you can mess with it right there. You can look at the expiration on it. You can look at the flags, like whether it’s HTTP only or secure. And it really helps you get visibility into what your cookies look like.

I just open up the cookies and set role to admin on every site.

It’s weird to me that that’s…

Yeah, that’s why I encrypt my cookies on the websites that I work on.

It’s weird to me that that’s not built-in to the dev tools either.

Yeah, I had the same thought.

You can view the cookies but you can’t edit them.

Can you see all the properties on the cookies, too?

Yeah.

Where do you see that?

It’s in the resources tab in the Chrome dev tools.

Yeah.

Oh.

And then there’s a cookies thing.

I see.

But you can only delete things. You can’t change them from what I can tell.

At the end of the show, we need to have a section on all the stuff in the Chrome dev tools I never click on. [Chuckles]

So, I’m going to steal the conch again to talk about the profiles tab and the audits tab in the Chrome dev tools.

Those are two [inaudible].

Profiles is what you use to determine, so the timeline tab is what I use to see if my memory usage is rising over time. But it’s not a good tool for figuring out why it’s rising. You can just see this line going up. But it’s hard to tell what’s causing it. With profiles, you can take heap snapshots which are basically recording the contents of your heap. And then you can do a bunch of stuff in your app and then take another heap snapshot and you can diff the two. So, you’ll see objects that were allocated and not released between the two snapshots. And you can use that to try and find memory leaks. There’s also CPU profiling, which I’ve found less useful. But I’m sure it could be helpful.

And then the audits tab runs a bunch of automated performance testing on your site and on your running code. It’s more generic. So, it’s a lot easier to use but also less specific information. But it tells you things like optimize your images or minify your code, or stuff like that. Just general good performance tactics.

Oh yeah, yeah. There used to be a plugin called PageSpeed I think that did stuff similar to this one. It looks like maybe they…

Yeah, it looks like they rolled some of that it. It’s like that YSlow add-on too…

Yeah.

That was around for a while.

Yeah.

Yeah, very similar. These are good sanity checks to look at every once in a while in your app.

Yeah. The favorite one I just found is that it shows unused CSS rules.

Oh, cool.

[Chuckles] Nice.

So, you could see what portion of the CSS you have loaded isn’t used on your current page.

Oh, that’s super cool. Nice.

Anyway, that’s all I got on the Chrome dev tools.

I have one more extension. If you’re an AngularJS developer, you will probably benefit from having the Batarang extension installed. What it does is when you install it, it puts a little tab on your toolbar there in your dev tools right next to the console called AngularJS. And I’ve actually not found it to be terribly useful when I actually click on that tab and use things that are in there like model inspector, the relationship and dependency inspector and all that stuff. But what I use it for is when you right click on an element on your page and say inspect element, and then go highlight that element in the inspector, then on the JavaScript console you can write $scope and you can inspect the scope of that element in your page. And you can change it and you can read it to see what’s going on. And that has been really useful for me.

I’ve been using ng-inspector for a lot of the same stuff.

Yeah, I thought the cool kids were all using ng-inspector nowadays.

That does make sense. I tend not to be one of those kids. [Chuckles]

So, my hot tip for browser plugins is Clout to Butt Plus.

What?

And it changes…

Cloud to Butt?

Yeah.

Like your butt?

It replaces the text ‘the cloud’ with the text ‘my butt’.

And it makes my life better every day.

Okay, I’m installing that right now.

I’ve got a couple more that I want to share. One of them is ModHeader. What you can do is if you’re making requests to particular endpoints, then you can change the header to make, so you can change the content type that you’re requesting or you can change the agent, the user agent, or other things. And you can then test endpoints with your browser to make sure that they respond appropriately to different values in the header.

Another one that I also use, and this is another one that I use to test my APIs is DHC REST/HTTP API Client.

Yeah.

And you can actually use that to again hit REST and HTTP endpoints. And it’s just a handy way of testing things out. And so, you can actually get in. You can make the request. Again, you can change the headers and everything else that you’re sending over. But this is controlling the entire request including all the POST data and everything else. And the nice thing is then you can verify, it’s like having a graphical interface on curl or wget that’s built into your browser. So, you can make those requests and you can send it exactly what you need and verify that everything is working the way that you want it to.

So, there’s another add-in just like that called Advanced Rest Client. And it has actually more stars, almost an order of magnitude more stars than that, what is it, DHC? I have that, that one you’re talking about Chuck. But this one comes up, has more downloads, more stars, and looks like it has exactly the same functionality.

I use Advanced Rest Client. They’re all probably the same. But the Rest Client thing has history that stores all your requests. But the creepy thing about all these extensions is they ask for permissions to see all your data on every website you ever go to, ever. And I just click yes and hope that no one tries to steal my life.

[Chuckles] That’s always the right answers when someone asks for your data.

Yeah.

I’ve never heard of Advanced Rest Client. I’ve heard of…

There’s one called postman. There are native apps that do the same thing. But they’re all just fancy wrappers around curl.

[Sings] Every move you make. Every step you take.

Break it down.

So there’s…

There’s actually, Jamison if you remember SpotterRF, I don’t know if we did this when you were there, but we created a network debugger that was like postman but also did TCP and UDP.

Oh yeah, I do remember that.

It’s still getting updated. There were some commits pushed to it the other day, some bug fixes.

Okay, I hate to rewind…

Is that like Wireshark?

Well yeah, you got to explain that to people that don’t.

Okay, so Jamison and I worked at a company called SpotterRF in good old Orem, Utah. And it’s a radar company. It took the whole space forward by using HTML5, what was available at the time, which was, we did some pretty cool stuff with it. And in order to help ourselves and our clients which a lot [inaudible] debug it, because these guys [inaudible] C. Like, “What? HTTP? Huh? Has that been around for 30 years? Didn’t we invent that already? No. Let’s make a new protocol.”

So, [chuckles] we built this debugger that was similar to postman and it was called netbug. And I’m going to see if I can pull up the GitHub repository for it. But you install it locally and the protocols that we used on the device were HTTP because we did a lot of HTML5 and JSON API stuff, and also UDP and TCP. And I haven’t downloaded it recently to see what happened to it, but it was pretty cool when I was working there. And apparently, they’re still making updates to it.

Alright, I got to rewind a little bit. Ng-inspector is so awesome. [Laughter]

How did I not know about this? I’ve been living in the past. I was such an early adopter with Batarang. And now I’m just left in the dust.

That’s the danger of early adoption.

Dave has come out of the dark ages and into the renaissance.

[Inaudible] this right now.

I feel so wise.

And there’s one of these for every framework, too. There’s one for Ember and one for React.

Yeah.

I think that’s a really cool trend that the frameworks are starting to delve into tooling, not just…

Yeah. Oh, yeah.

Making their frameworks good.

One thing…

Because the frameworks [inaudible] such weird stuff these days. [Chuckles]

One thing to note: I found that to be completely useless when on Plunker because Plunker is built in Angular.

Oh, awesome.

And so, all of their spam is in there.

DAVE: ng-inspector exception.

Yeah, you cannot get to what you care about because all of their stuff is just, it’s a big huge app with tons of scopes and you just can’t find where you need to be.

I’ll take that under advisement.

Well, now you know.

I think you’re saying never use Plunker.

No, I love Plunker.

Oh, [man].

It’s definitely my favorite of the online coding tools.

So, which ones do you guys like? I think these kinds of tools are almost in the same category as browser dev tools and extensions.

Yeah, [inaudible]

I think I usually just use JS Bin.

JS Bin, JS Fiddle?

Yeah, I’m not religious about any of them. They all seem the same to me.

Okay. Are these companies or are these just hobby projects? I’m curious. I don’t know.

I don’t know either.

Which ones? The JS Bins and Plunkers?

Yeah, yeah, and Plunker.

I think it probably depends from project to project.

Oh, there is one called CodePen that Chris Coyier, the CSS Tricks…

I like that one. That’s more real-time editing and collaboration.

Yeah. And it has a lot of the same features as all the other ones. But it’s more that there’s a community around it of sharing wild CSS hacks or cool front-end things. So, I do like that one because it’s the people who use it, not just the technology it has.

Isn’t that the one that you can share with other people and edit it real-time together?

I think all of them you could do that.

Mostly do that.

Oh, do they? Okay.

CodePen might, it might be a little bit more first-class there.

Yeah, CodePen has some kind of aggregation and curation features though, where you can have you CodePen profile and see the top 100 CodePens and stuff like that, which is cool if you just want to see the cool stuff people do.

I like Plunker because you can create more files into it rather than just stuck with just the one for each.

The three?

Yeah, three default ones. You can actually create your own files and name them. So, you can take it beyond just the very, very bare minimums of a demo project into something a little bit more complex.

Yeah.

So, I like that.

So, I’m starting to feel a little bit self-conscious. I was a little worried about this show because it’s always a worry when you bring out these tools that you use and people tell you, “Oh my gosh. That is so 2013.”

You guys ever have that experience with your coworkers or friends?

Every day of my life.

[Chuckles] Yeah. It’s so bad in the web development community. Actually, it’s really great I think that we are like this. We throw away our tools. Like every six months, they’re old and busted.

The worst is working with Merrick Christensen.

Because he literally changes his editor every other week.

Oh, wow.

Yeah.

I spent ten years learning my editor. How could I? [Chuckles]

It’s not Emacs though.

Okay, other cool tools?

I think it’s also important to a markdown previewer add-in.

Okay.

Why?

If you end up doing a markdown page, it’ll preview it in nice looking HTML. You can see how it’s supposed to look done in an actual markdown preview.

Yeah, don’t get me wrong. I like markdown. I just don’t use it that often in the browser, et cetera, et cetera. So…

Ever heard of a little thing called GitHub?

Oh yeah, whatever. [Chuckles]

I just commit it to GitHub and then go look at it. [Chuckles]

Why complicate this?

Okay, let’s talk about…

Commit it to GitHub and look at it, when you could just edit it in GitHub and look at it.

Yeah, exactly.

Too many steps.

Can we talk about the element inspector in Chrome?

Yes.

Yes.

This is probably the one part of the Chrome dev tools that most people are already familiar with. But it’s got some pretty cool stuff in it.

No, console’s definitely the number one.

Oh yeah, okay. That’s true.

Then the elements.

First of all, we should point out you can open the Chrome dev tools with a keystroke.

Yes.

And on the Mac it is Command + Option + I to open the element inspector. And then I think it is Command + Option + J to open the console directly. I don’t know what it is on Windows, Joe.

So, it’s pretty much the same keystrokes except it’s not Command, it’s Ctrl + Shift. You got Ctrl + Shift + I to just open it up and then Ctrl + Shift + C gives you the inspector. And I don’t know if Ctrl + Shift + J will get you to the, yeah, that gets you to the console, Ctrl + Shift + J.

Okay.

So, I think they mimic it. So, you said I was the inspector, but I thought C was the inspector and I was just to open up the tools.

Right click on the element you want to see.

I opens you to the last…

And then pick inspect element and that’ll open up, too.

Yeah.

I opens you to the last tab that you had open.

C, it looks like C opens to [inaudible]. Yeah, yeah. What Jamison said.

Yeah.

What did Jamison say?

Command + Option + C, it opens the dev tools to whatever you were looking at previously.

And Command + Option + I opens it to the, gives you the inspector and lets you…

Yes, the element inspector.

Because that’s actually kind of backwards on Windows. That’s weird. For some reason, I have the muscle memory depending on which box I’m on because I use both my boxes roughly the same amount. So, I don’t ever get screwed up when I’m over on my Mac.

Okay, Jamison is saying I’m lying, which is probably true.

Anyway, this is something you can learn for yourself. It’s homework.

Okay, let’s talk about the element inspector though, because it’s got some pretty cool stuff. First of all, when you click on an element in the inspector, you can see its CSS properties. And you can edit those right there in real-time. And there are two main sections to edit those CSS properties. There’s one called element.style which is the equivalent of putting a style attribute on the HTML element.

But what’s I think even more powerful is you can actually look at each of the rules that have been applied to this element. And you can edit those inline, too. So, if you have a table with a bunch of rows, you can select one of the rows in the inspector and edit one of the class-based, say for example rules. You can edit the properties on that rule. And then all of the rows will update in realtime to reflect the change you made, which is pretty cool. I guess most people have probably already done this.

Well, the thing that’s really cool about it is that you can tell Chrome to remember the change. You can effectively save it. You can either save it to your hard drive or you can commit the change, sort of. And then when you refresh it will keep those changes.

How do you do that?

I don’t remember. I’ve only done it a few times. I know that you can save the CSS, the modified CSS to your hard drive. So, if you change the style then you can save it to your system. And then you just go put it back in your project, if your project’s on your hard drive.

That’s pretty cool. But have you ever had a case where you’ve got this saved CSS rule and it makes your app look different for you than everybody else?

Yeah, I’ve also had plugins do that.

Yeah. One of the other things that’s cool about the CSS display is to the right of those properties, or depending on your layout, below them, you can see the box model. You can see the padding, the border, the margin.

Yes.

And the position rules. And on the little numbers on those, or the hyphen if you don’t have one, you can double click it and change it right there, visually. So, instead of typing in the CSS rule, you can just go find the part of the box model you want to modify, like say it’s the margin on the top, and just edit it, which is really cool.

I didn’t know that.

You just double click on it.

That’s cool. That’s way cool. It’s amazing that as much as I use this particular piece, there are still things I don’t know about it.

Yeah.

Remember the iOS developers and how much time they spend on Xcode? I think they spend too much time. But I could spend more time on tools. [Laughter]

That’s nothing with the amount of time that I’ve seen people, a.k.a Merrick Christensen, spend in Chocolatey trying to make it work exactly the way he wants it to work.

Mm, I could spend more time with chocolate.

[Chuckles] Me too.

[Laughs] We’re talking about different chocolates.

Oh, darn.

Fine. Spoil my fun. See if I care.

Jamison, do you know any iOS developers who don’t use Xcode to build their apps? Is that even possible? I don’t know.

I think I know one that uses that JetBrains one.

Yup. They’re called hybrid developers.

No, no, he’s an iOS developer.

AppCode. AppCode.

Yeah, I think he uses AppCode.

Yeah.

But he also, he values newness for its own sake, is a nice way to put it.

Is he shunned by the other developers?

Oh, you can bet he is.

Oh yeah.

That’s got to be a cardinal sin.

I don’t know if he’s in…

Oh yeah, it’s like ‘The Scarlet Letter’.

They probably won’t let him buy Hush Puppies at the store. [Laughter]

You know, and then there are also all of the hybrid app frameworks that you’ve got out there.

Yeah. Okay, I’ve got one more Chrome extension if we have time. It’s called Page Ruler. It’s for Chrome. I’m sure there are others. When you click it, your cursor becomes a little crosshair and you can select a box on the page. And it will tell you how wide it is, how tall it is, and where it’s positioned, top, right, left, and bottom. So, it’s cool for when you’re just saying, “Hey, that box looks taller than that box or they don’t seem to be the same width.” You can just measure it right on the page, which is kind of cool. It’s really great if you have a keenly developed attention to pixel detail.

Yeah.

Which some people do and I am very fond of them. But I’m not one of them.

I think there’s another add-in that a typical developer should have, and that’s a color picker.

Yeah.

Yeah, definitely.

I have ColorZilla on mine.

A little teardrop tool to say, “What color is that?”

Yeah, exactly.

Yeah.

And get it in all the different formats.

Oh, can I tell you about one more as long as we’re talking about pixels? [Chuckles]

Yeah, go ahead.

Okay, this one is called PerfectPixel. And if you’re super obsessive about just the perfect pixel positioning, let’s say you have a UX designer who gave you a mock up, you can take this PerfectPixel extension and you can browse for the mock up file. Say it’s a PNG file, and then you can lay it over the top of your page and make it semi-transparent.

Oh.

So, you can still see your page beneath it. And then you can start messing with your CSS and layout to try to get your page to line up perfectly pixel for pixel with the mockup.

Oh, nice.

So, if you have UX designers and you want them to just absolutely love you, do this and they will think you are so cool.

Wow.

Oh, you mean those guys?

Yes.

Awesome. Alright, well let’s go ahead and do some picks. Jamison, what are your picks?

So, one is an essay called ‘Aboard Amtrak’. It’s a long form essay about this writer’s journey where they didn’t have a house for a couple of months and just used the Amtrak. It’s one of those really hippie things that you can do when you have no responsibilities or people that depend on you and go do really fun things. But it’s really well-written. It makes you wistful and nostalgic for the good old days and describes American culture in an interesting way. Just a beautiful piece of writing that has some really neat visual effects built into it. They do some cool stuff with the web.

The other one is an article on how SQLite works. It does a very good job of making it appear simple to dig into the internals of these big hairy C or C++ projects. It’s someone who’s just playing with SQLite. They make a table. They edit the source code to insert some tracing and debugging code. And just explore it to see what SQLite does when you make tables and when you make queries, and how indexes work, and things like that. It’s really interesting and inspiring to think that I could do that with similar projects.

And the last one, they’re two books. The first one is called ‘Blindsight’. I may have picked it before but I’m going to pick it again. The second one is called ‘Echopraxia’ and it’s a sequel to the first. They’re near future science fiction books about alien encounters. But it’s very hard sci-fi. So, it tries to take a very realistic look based on what we know about the brain and consciousness about what aliens would be like. And they focus a lot on the role of consciousness in intelligence. And I’m so used to those two things being the same. But the main thesis of the books is that you can have intelligence without consciousness and you can have consciousness without intelligence. And the author explores those themes interesting ways that are also very entertaining to read to. Those are my picks.

Alright. AJ, what are your picks?

Okay. So, one: there’s this video that I had seen some time ago called ‘Inventing on Principle’. And I watched it again due to a friend’s recommendation. And it’s really, really cool. It just got me, when we were talking about all these browser console.logging stuff and all that, this guy Bret Victor poses the question, “Why can’t we interact with code immediately?” And he actually creates some prototypes where there’s no difference between the debugging environment and the coding environment. And there’s no running the code. He makes a change to the code and it outputs the results. The debugger is running live so that as he makes an edit in the code it goes back to the state where he was with that one change kind of thing. So, I’d highly recommend watching it and just thinking how could we make design like this?

And then another cool thing was I recently bought a Bravo Audio tube amp. And if you have decent headphones that you could get a little bit more volume out of except that you can’t because your little tiny eighth-inch iPod jack really isn’t going to give it enough to experience their fullness, if you wanted to experience their fullness in some sort of brain-damaging way for example, this tube amp is super powerful. And it just looks really cool. The downside of it is that it picks up cellphone interference super easily. So, you can’t have it anywhere near a cellphone. Otherwise while you’re listening to music, you’ll hear that [makes cellphone feedback noises] kind of thing.

How did that go again?

That actually sounds like most of the music I listen to.

Yeah, it kind of does.

Yeah. So, if you’re listening to dubstep or 8-bit tunes…

I won’t even notice then.

Yeah, you wouldn’t notice. You might even think, “Wow.”

Cool drop.

There’s much more here that I’m hearing that I never heard before and it’s actually…

This amp is awesome. [Laughter]

And it’s actually just your cellphone. But you got to look at the length to it. It just looks cool. It glows. It’s the coolness factor entirely.

Alright, Joe, what are your picks?

Alright. So, my first pick is there’s a new Train album out and I really like it. I listened to it several times and I enjoyed it every time. If I listen to it again, I assume I’m going to enjoy it that time as well. [Laughter]

So, I’ll pick the new Train album.

There’s a new TV show that just started, Star Wars Rebels. Cartoon show on Disney XD and they just had episode three yesterday. So, by the time you guys hear, episode four will have just been out. Love it. But that’s mostly because it’s Star Wars. And much like an Apple fan boy, I will buy anything that George Lucas does as long as it’s shiny, even though he’s not doing it anymore. It’s Disney.

So, I might be a little biased. Yes, I did…

Maybe.

I may or may not have named my son with the middle name of Anakin.

Oh, no. [Laughter]

So, I could be biased. But I do love the cartoon.

Oh, Joe.

I’m so excited for that and all the other Star Wars material that’s now coming out. I thought George Lucas was going to have to die for me to get more Star Wars movies.

Yeah, you didn’t have to kill him.

I didn’t. I actually had that plan. It was in the early alpha phases.

And my final pick is a new conference that myself and some friends have put together called LoopConf, which is a conference for WordPress developers. It’s going to be held in May down outside of Vegas, in Henderson, Nevada at a little resort. A nice resort. And it’s going to be awesome. Tickets will be going on sale in several weeks. The call for papers is open now. So, if you are a WordPress developer, please submit a paper. We’d love to have you.

Awesome. Dave, what are your picks?

Alright. I have two picks for you today. First of all, in my ongoing mission to vim the world, I have another vim plugin called Git Gutter. This is a cool little plugin that takes the left-hand side of your editor and makes it for lines that you have changed and tells you which lines you’ve added, which lines you’ve modified, and where you have deleted lines, which is really handy as you’re moving around in your file to jump back to where you were working. You can say, “Oh, I added that line since I committed last.” It’s probably my favorite vim plugin of all time, which is saying a lot.

Hey, just FYI vimtheworld.com is available. [Laughter]

In case you want to pick it up.

That’s a good idea.

Yeah.

Okay. My second pick and final pick is a book called ‘Hidden like Anne Frank: 14 True Stories of Survival’. This author tracked down 14 people who survived the World War 2, the holocaust effectively, by hiding themselves as children from the Nazis. And the stories are just so cool. There are 14 short stories in the book and they’re really fun to read. And most of them I think, if not all of them, come from the Netherlands. It’s not a place I’ve generally read about. But I’m visiting there next week. And so, I wanted to get acquainted with it. And I read this story and I was not disappointed. It’s been really cool. So, if you’re into World War 2 history at all, this is a nice introduction to what these people went through as children. And it’s really cool. I’ve been reading it to my kids and they like it a lot, too. So, those are my picks.

Cool.

Awesome. I’ve got a couple of picks. These are things that I am currently working on. One of the more common questions I get these days is, “How do I start a podcast?” or “I am starting a podcast and what do I need to do, know, et cetera?” So, in that vein I have set up a website called PickUpPodcasting.com. And right now, it’s just hosting a landing page for a webinar that I’m going to be doing. When this comes out it will be on Friday, meaning you have two days to find out about it. But I’m going to be emailing out a ton of good stuff and be doing the webinar. If you want to find out, you can either text ‘podcasting’ to 38470 or you can go to PickUpPodcasting.com and sign up for the mailing list. And then you get all the good free stuff. So, I’m going to pick that.

Also, the other question I get pretty frequently is about freelancing. And so we at The Freelancers’ Show which is on the same network as this show are doing a Q&A every month for people who want to go freelance or learn more about freelancing. So, if you’re interested in that, you can go to freelancersanswer.com. I don’t have a keyword or a short code for that one yet. But anyway, FreelancersAnswers.com, just remember that. And we’ll do it. We’ll answer all your questions. You show up, it’s on the Google Hangout that you watch on the landing page, and we have a chatroom where we chat with the folks on there.

So, one more, one more webinar I forgot to mention. But this one is very pertinent to this show. I actually got a hold of all the people who do, or some of the people who do Ionic, Famo.us. I’m still reaching out to some of the folks who do PhoneGap and Cordova and some of the other JavaScript mobile development frameworks. And I’m going to put together a round table. So, keep an ear out for that. I don’t have a website up for it yet but I will soon. It will be at the beginning of November. So, we’ll announce that as well. Those are my picks.

Cool.

Yeah. I don’t have anything else, so this was fun.

I’m glad we had this time together.

Oh, thanks. Alright, we’ll wrap this up and we’ll catch you all next week.