If you need to persist data using now, it’s recommended that you use a hosted database service. In this lesson we'll create a new, free MongoDB database on http://mlab.com and wire it up to use with our node.js app running on Zeit's now hosting service.

Often your project will require some secret keys or tokens - for instance, API keys or database authentication information. Learn how to safely and easily deploy secrets to now, and how to expose them as environment variables that your applications can load without making them public to the world.

Zeit allows you to expose the inner working’s of your deployment’s source code to aid in debugging or understanding how your code works. Learn how to configure and use this powerful window into your live behavior.

Using now’s alias command you can point your own domain name to any now deployment. In this lesson I'll actually buy a new domain name and configure it to work with now, showing you every step along the way.

Because now deploys are immutable, you can’t push changes to a running instance - you just push a new instance, which means you get a new URL. But doesn’t that mean your URL is always changing? How do you share a link to your application? By using now alias to point a custom name to a specific deployment.

Use Zeit’s now to deploy a docker container to the cloud quickly and easily. We will see that the process is exactly the same as deploying a Node project. This lesson will also show how log information is displayed on the generated url by Now while the app is being deployed.

Use Zeit’s now to quickly and easily share static files by making them accessible to anyone with the URL.

Use Zeit’s now to deploy a node application from your local machine to a remote cloud service in moments.

Learn to use the Style panel within the Element Inspector to examine and tweak the CSS rules applied to your application as it runs.

Learn how to use the Inspect Elements panel in Chrome DevTools and how it differs from viewing the source of the HTML you're looking at.

Learn how to use the Elements panel in chrome devtools to make structural changes to the DOM as it runs - you can explore what your site would look like with different elements and attribute values, all without polluting your source code.

There are a variety of ways to trigger the javascript debugger. Use the elements panel to set breakpoints on DOM elements so that you can hit the debugger whenever an element’s children or attributes change, or when it’s removed.

The Elements panel includes a tool to show you how your site will look across a variety of devices. This can be tremendously helpful when troubleshooting layout issues on specific hardware that you don’t have access to, as well as general-purpose response design. You can mock different screen resolutions and behaviors to help put you into your users’ shoes.

Use the Event Listeners tab within the Elements panel to list all DOM Event listeners. This is useful to understand how and why your site is reacting to various forms of input.

The Element Inspector in Chrome DevTools offers powerful integration with the console - learn how to programmatically navigate your selected element, how to search through the history and use CSS selectors to control what you're looking at and how to quickly and easily listen for events as you debug your application.

Use the Chrome Debugger to pause execution of your application as it runs to see what’s happening in slow-motion. The debugger is an advanced tool that allows you to examine every change that happens in your application so that you can understand how and why your application state evolves over time.

Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your browser against whatever website you’re looking at. This is a great way to store commonly used pieces of code that you rely on for debugging or customization.

There are a variety of ways to trigger the debugger in Chrome's DevTools. You can set breakpoints on line numbers, break on XHR requests or DOM changes, break on specific events or even manually break by using the special debugger keyword in your code.

Most of today’s websites use optimized, compiled, minified and obfuscated javascript and CSS. Examining this stuff here has some severely limited utility, which is why when developing we rely on sourcemaps. We’ll set up a webpack workflow that uses sourcemaps to show you how they can help your debugging!

Use the source navigator to browse through the various resources that your site has loaded from remote servers through the course of its session. Stylesheets, JavaScript files, media attachments and anything else that was requested as a part of your application’s lifecycle shows up here, and you can examine these resources in the context of your running app to see what exactly you’re rendering.

Anyone who’s been around the net long enough has seen various HTTP error codes - things like “404 file not found!” or “500 internal server error”. But what are these, exactly? Let’s use the Network DevTool to better understand them. Learn the four major types of HTTP status code, and how to use the Network panel to inspect failed HTTP Requests.

Use the Overview tool in the Network devtool to see requests over time, and to constrain the tool to a given window of time so that you can focus on a subset of traffic.

Often when we’re developing we’re serving our content directly from our local machines, meaning that our network performance is incredibly fast. In production, though, conditions are often much less reliable. To replicate production conditions for testing and debugging it can be useful to throttle our local network speeds - you can do that here.

A large enough project will frequently flood the network devtool with content. Use the filter tool to restrict which HTTP requests you’re inspecting so that you don’t get overwhelmed.

To understand the Network DevTool, you have to understand what HTTP is and how it works. Let’s use the Network DevTool to inspect an HTTP request and its corresponding response so that we can understand what the browser is doing.

AJAX allows us to send requests to the server from our javascript applications, rather than allowing the browser to directly request declaratively specified resources. Under the hood, though, AJAX requests are still just HTTP requests - and that means we can use the Network Panel in Chrome’s DevTools to inspect our AJAX operations!

Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with a pretty user interface that breaks out useful information and presents it in a way that's easy to understand at a glance.

Learn how to use console.table to render arrays and objects in a tabular format for easy scanning over the values. We'll create some mock data and then render it to the log in various ways to explore console.table's API.

Learn to use console.time with console.timeEnd to get accurate timings of operations in javascript. This tool can help with javascript profiling and performance optimization, and knowing how to use the console to do it means you don't have to pollute your codebase with timers and placeholders.

Learn how to user console.count in order to log out how many times a given thing has happened.

Learn about console.assert, which is syntactic sugar for logging an error the console when a given condition is not met. It's useful, but may not do what you expect if you're coming from another language - watch this lesson to learn how to use it, and when not to.

Organize your log output by grouping your logs into collapsable hierarchies using console.group().

Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and apply C-Style string substitution to make the console work for you.

Go beyond console.log by learning about log levels, filtering log output and structuring your output to be meaningful and concise. The JavaScript console object offers many methods to make your life easier - start learning them here!

A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects - watch to learn how! :)

Javascript has first-class functions which means that any function can stored, passed around, and returned just like an Object can. This allows for a lot of flexibility with how you call functions. This allows us to use array reduction to create functional pipelines by composing arrays of functions.

Learn how to apply timing functions to CSS transitions. We'll talk about pre-defined functions like 'ease-in', 'ease-out' and 'step', and then look at how to specify a custom function capturing the exact transition effect you're looking for.

Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for transitions to multiple properties on the same object.

Learn how to use native CSS transitions to automagically add motion to your application. By specifying a simple transition rule, changes to the values of specific properties can be interpolated over time to give a graceful, polished look and feel to what used to be a jarring and sudden transition.

Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to invert the order in which your reducer is applied to your input values.

In this lesson, we will be looking at two common mistakes programmers make when working with reduce. We will see why we always need to pass in an initial value for our accumulator as well as return the accumulator.

Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an accumulator along with no knowledge about its context. Learn how to reduce an array of numbers into its mathematical mean in a single reduce step by using the optional index and array reducer arguments.

Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

We'll look at using array.reduce to transform an array of strings into an object that counts the occurrence of each string in the array.

Learn how to use the reduce function on javascript arrays to transform a list of values into something else. In this introduction we'll be taking a list of numbers and reducing them into a sum.