Even if you’re new to coding, you’ve probably came across the good ol’ for loop:

for (let i = 0; i < array.length; i++){
console.log(‘oh hai’)

While this common control flow statement is totally fine for all intents and purposes (and still probably the most versatile), ES2015 provides some clean looking revisions:

for..of and for..in

for..of iterates over the elements of an array:

const odds = [1,3,5,7,9]for (const element of odds){    
// 1
// 3
// 5
// 7
// 9

for..in iterates over the keys for each index in the array:

const odds = [1,3,5,7,9]

Blocks, Procs, Lambdas


If you’ve written any Ruby, chances are you are familiar with blocks. A block is a chunk of code enclosed between curly brackets, or between the do and end keywords. Just like a method, it can take parameters (at the very beginning of the block, between pipes). This means that we can pass values to blocks, and also receive values from blocks.

We can call a block using the yield keyword, like so:

def print_once
print_once { puts “I ran.” }# => “I ran.”def print_twice
print_twice { puts “I ran.” }# =>…

JSX is a JavaScript syntax extension that is primarily used with React to describe what the UI should look like. JSX essentially produces ‘elements’ to render to the DOM.

While JSX may look like a markdown language, we can insert any valid JavaScript expression by placing it inside curly braces. For example:

const name = 'Lebowski'
const element = <h1>Hello, {name}</h1>

is equal to:

ReactDOM.render(element, document.getElementById(‘root’));

This is so because after compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means we can use JSX inside if and for loops, assign it to variables, accept…

This article is meant to provide a brief overview of each panel in Chrome DevTools. For more depth, I encourage you to read the official documentation.

With that said, DevTools is a fantastic resource that can easily boost productivity, but it can be a lot to take in at first.

What is DevTools? Where is DevTools?

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools allows us to edit pages on-the-fly and diagnose problems quickly, which ultimately helps us build better websites, faster. There is so much to cover on this subject…

Colter Ulrich

Full Stack Software Engineer | Audiophile

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store