Forem: kristen

Listen Up: Podcasts for Fellow Code Newbies

kristen — Mon, 26 Nov 2018 02:19:14 +0000

As a recent coding bootcamp grad, I'm constantly looking to build up my skills. As I work on my portfolio, build side projects, write blog posts, and practice for tech interviews, I've also been listening to a ton of podcasts on my way to work and around the house. Some are created with new developers in mind, while others cover a mix of experience levels.

Code Newbie

https://www.codenewbie.org/podcast
Well I had to mention this one first. This is definitely my favorite developer podcast. Saron Yitbarek is funny and engaging and asks great questions of her equally-great guests. The podcast covers all sorts of topics, and it's just the best.

Follow them on Twitter too and participate (or just lurk!) on the #CodeNewbie weekly chats. Here's a recent 30-minute Coding Check-in:

CodeNewbie

@codenewbies

Welcome to our 93rd #CodeNewbie 30-minute Coding Check-in!

19:00 PM - 25 Nov 2018

4 12

And a recent #CodeNewbie chat:

CodeNewbie

@codenewbies

Welcome to the 244th #CodeNewbie Twitter Chat!

We are the most supportive community of programmers and people learning to code and we’re so excited to chat with you! And happy #ThanksgivingEve 🤗

02:01 AM - 22 Nov 2018

5 18

Sample episode

S4:E4 - What happens in a technical interview? (Parker Phinney)

CodeNewbie

Your browser does not support the audio element.

1x initializing... ×

BaseCS

https://www.codenewbie.org/basecs
The BaseCS podcast is hosted by Saron Yitbarek and Vaidehi Joshi. It's based on Vaidehi's BaseCS blog, in which she learned about a new CS topic every Monday for a year, and wrote all about it: https://medium.com/basecs
I find her explanations easy to understand, especially combined with her blog posts (which also come with other resources if you want to keep learning about a topic).

Sample episode
[First episode of the show]

S1:E1 - "Bits, Binary, and Bytes"

Base.cs Podcast

Your browser does not support the audio element.

1x initializing... ×

The Bike Shed

On The Bike Shed, host Chris Toomey and guests discuss their development experience and challenges with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire this week.

I like listening to the Bike Shed because, even when they are discussing topics I know little or nothing about, it's a great way to hear how people talk about web development. One thing that I know I need to improve upon is my ability to talk about technical topics, and I find that podcasts are a great way to get more familiar with this.

Sample episode

139: Red, Green, Refactor (Alex Clark & Sean Doyle)

The Bike Shed

Your browser does not support the audio element.

1x initializing... ×

Syntax

https://syntax.fm/
Hosts Wes Bos and Scott Tolinski, who both have great online tutorials, have episodes on specific development topics, like React or JavaScript or Debugging or freelancing as a developer, and others that are more general "Potluck" episodes. I find it easy to listen to and I always learn something new from these guys.

You can [submit questions for their Potluck episodes] here: (https://docs.google.com/forms/d/e/1FAIpQLSfQlAo1wXHiJMySdU-h8QMtfoz92aMS9eycEHXB6eRCLh8KHA/viewform) too.

Sample episode

React Hooks

Syntax - Tasty Web Development Treats

Your browser does not support the audio element.

1x initializing... ×

Developer Tea

https://spec.fm/podcasts/developer-tea
These episodes are nice and short (usually under 20 minutes - they 'fit into your tea break') and cover topics like building healthy habits, communication with co-workers, dealing with distractions, and much more. Now, I don't HAVE a developer job just yet (soon. Soon!), but I still enjoy listening to this show, and I can see how it will be even more helpful when I am working in a dev role (SOON).

Harmony Over Perfection

Developer Tea

Your browser does not support the audio element.

1x initializing... ×

I've also downloaded some episodes of these podcasts recently but haven't started them yet. What are your favorite podcasts?
Ruby Rogues
A podcast by panel about Ruby and related technologies.
Giant Robots Smashing into Other Giant Robots
A weekly podcast discussing the design, development, and business of great software. Hosted by thoughtbot CEO, Chad Pytel, and rotating cast of fellow developers, designers, and entrepreneurs, we delve deep behind the scenes of the products and technologies we love.
JavaScript Jabber
Weekly podcast discussion about Javascript on the front and back ends. Also discuss programming practices, coding environments, and the communities related to the technology.
Command Line Heroes
This is another podcast hosted by Saron, but I haven't listened yet. Please keep making podcasts, Saron, and I will listen to all of them. (Am I starting to sound obsessed yet? I may need to tone it down a bit.)

Hoisting and Scope

kristen — Sat, 20 Oct 2018 14:30:55 +0000

What is Hoisting?
Hoisting is a default behavior in JavaScript that puts function/variable declarations in to memory before any code is executed. Hoisting is related to two phases that occur when a JavaScript file loads - compilation and execution.
When your code is compiled, your variable and function declarations are saved in memory. (Nothing is physically 'hoisted' to the top of your code, the declarations stay where they are, but they are being evaluated before the remainder of your code is executed.) During this first phase, initializations are not hoisted.

Here is an example of this from MDN web docs

var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y

// The above example is implicitly understood as this: 
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

Why does hoisting matter?

Hoisting matters because it allows variables, functions, and other datatypes to be *initialized and used before they are declared *.

Here is an example:

cheeseName("muenster");  
// Here we are using our function, but it only gets declared in the following lines. Still, the code works

function cheeseName(name) {
  console.log("My favorite cheese  is " + name);
}
/*
The code above successfully writes "My favorite cheese is muenster" to the console
*/

To help avoid confusion and conflicts:

*declare your functions at the top of your code. *
Use let and const (more on this below)

*What is Scope? *

Scope refers to the part of a program where a particular variable is accessible. The scope is determined by where you declare that variable. In JavaScript, there are two types of scope: global and local scope. If a variable is declared outside of a function or block (aka between curly braces, like an if/else statement), it has global scope, and can be accessed anywhere in your code. Within local scope, you can have function scope and block scope, and the variable will only be available within that function or block.

In JavaScript, variables declared with the keyword var have global scope, no matter where they are declared. This can lead to issues like naming collisions and make your code harder to debug.

Declare variables with const as your default, and then adjust from there. As a newbie, I was using 'var' all over the place because, hey, it worked! But I now default to 'const' because it will throw an error if an attempt is made to change its value (Note: you can mutate the value of an array or object, but can't reassign it to something else Link)

Why var and let are not equal

Though var and let may seem to be interchangeable, they definitely are not:


 declarations are not hoisted in a block scope. (A block scope is anything that falls between curly braces.)


```let```

 and

 ```const```

 have a block scope but

 ```var```

 has a function scope.

Here is a good example from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)

function varTest() {
var x = 1;
if (true) {
var x = 2; // same variable!
console.log(x); // 2
}
console.log(x); // 2
}

function letTest() {
let x = 1;
if (true) {
let x = 2; // different variable
console.log(x); // 2
}
console.log(x); // 1
}




Another important hoisting difference between let and var, again from the same MDN docs, is:
> let bindings are created at the top of the (block) scope containing the declaration, commonly referred to as "hoisting". Unlike variables declared with var, which will start with the value undefined, let variables are not initialized until their definition is evaluated. Accessing the variable before the initialization results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.

And here is one great visualization about var, let, and const from Mariko Kosaka @kosamari on Twitter: https://pbs.twimg.com/media/CzLVVjtXAAERmbc.jpg

![https://twitter.com/kosamari/status/806941856777011200](https://pbs.twimg.com/media/CzLVVjtXAAERmbc.jpg)


**Named and Anonymous Functions**

Function Declaration or Function Statement:

function myFunction() {
//code goes here
}




Functional Expression - this can be a named or an anonymous function:

var myFunction = function() {
// code goes here
}



Anonymous functions are often used for callbacks:

button.addEventListener('click', function(event) {
console.log('button is clicked!')
})




The functional difference between function expression and function declaration? 
A **function declaration is hoisted** so you can use that function before it is declared.

A **function expression is not hoisted**, the variable will be hoisted but not the function. It won't know that the variable is pointing to a function at all.

One benefit of using a named function? They can make it easier to debug your code. 


**Arrow Functions**

From the MDN docs:
> An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
> 

Arrow functions are a helpful shorthand to make anonymous functions, and can be used anywhere the `function` keyword is used

Here is how you would write an anonymous function and assign it to a variable:

var myFunction = function() {
// code goes here
}



And here is how you would sub in an arrow function:


```const myFunction = (arg1, arg2) => {/* code goes here */}```



You can use an anonymous function in a callback:

button.addEventListener('click', function() {
// code goes here
})




Or, arrow-ize it like so:

button.addEventListener('click', () => {
code goes here

})




Arrow functions also, by default, create a return value if the code is one line long and isn't in a block. Here are some examples of this 'consice body syntax' with a implicit return value:



```const sum = (num1, num2) => num1 + num2```




```let moreThan20 = array.filter(num => num > 20)```


[Source](https://zellwk.com/blog/es6/#arrow-functions)

With these features, arrow functions let you write shorter and clearer code (once you understand the syntax) when used appropriately. 

**Arrow Functions and lexical

 ```this```

**
The value of

 ```this```

 is normally defined by the function that calls it. So if you have an object method, the

 ```this```

 keyword inside the method would refer to the object.

Arrow functions, on the other hand, do not have their own

 ```this```

; instead,

  ```this```

 refers to the current surrounding execution scope, and not to the object method or the object itself.

Thus, in the following code, the `this` within the function that is passed to setInterval has the same value as this in the enclosing function:

function Person(){
this.age = 0;

setInterval(() => {
this.age++; // |this| properly refers to the Person object
}, 1000);
}

var p = new Person();



[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

> The methods call(), apply(), and bind() will not change the value of this in arrow functions. (In fact, the value of this inside a function simply can’t be changed; it will be the same value as when the function was called.) If you need to bind to a different value, you’ll need to use a function expression.[Source](https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/)

Here is a handy [flowchart from Kyle Simpson](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/fig1.png) about when to use an arrow function.