Learn Lodash, Stripe and Webstorm

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Create an eCommerce Store with Next.js and Stripe Checkout

[Lodash](https://lodash.com/docs/) is a collection of utilities that have become a staple of modern web development. This collection will show you how to re-create its most common methods using simple JavaScript techniques available in any modern web browser. In addition to re-building tools like `_.merge`, `_.get` and `_.debounce` from scratch you will also learn how to replace them completely in some cases with modern syntax such as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) and [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries).

This collection should interest the following groups:
- Those who want to better understand common JavaScript patterns
- Engineers who want to reduce their dependence on Lodash (for performance or other reasons)
- Candidates preparing for a technical job interview (where it is common to be asked how to implement some of these methods).

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Recreating Popular JavaScript Utility Methods from Lodash

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.merge](https://lodash.com/docs/4.17.15#merge) method from scratch.

First we'll create a test file with two objects that we want to merge together and demonstrate the output after running them through lodash.merge , then we'll go about creating our own version of the function.

Our initial version will support only one `source` object to merge in, and will support only the subset of JavaScript syntax supported by the JSON spec, including the following types:
- `boolean`, `number`, `string`
- object literal
- array

After getting basic types to merge we'll show off two methods for merging arrays, either using [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) or recursively going through the children and merging them.

Finally we'll build our own `isObject` function to check for object literals and recursively apply our `mergeJSON` function to any object literals in our `source` object.

And last we'll add support for multiple `source` objects to be merged in using a `for...of` loop.


**Note**

The `mergeJSON` method we create approximates the `lodash.merge` functionality but does not seek to replace it. It may be useful for some use cases, but primarily it's meant to be a tool for understanding how to merge objects with recursion.

Build lodash.merge from Scratch

This lesson will demonstrate how to replace common uses of [lodash.get](https://lodash.com/docs/4.17.15#get) with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) syntax.

`_.get` is by far my favorite lodash method. I've been on so many projects where the results of a network call was a large and often unreliable blob of data. After countless attempts to reign in errors caused by trying to access non-existent properties I've come to rely on _.get as a simple & safe way to retrieve data from those objects. However, as is always the case in web development, times are changing and the tools we need to safely access properties of complex objects are now being built into the platform. [Optional chaining syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) gives us the power of _.get without several of the tradeoffs. It doesn't require an extra library to use, it plays nicely with TypeScript and it can be used when calling methods as well as when accessing properties.

This lesson covers 4 common use cases of `lodash.get` and converts them to using optional chaining syntax.

1. Nested Object and Array Access
2. String and Variable Property Access
3. Calling a Method on an Object that may Not Exist
4. Providing a Default Value when a Property does Not Exist 

---

 ### Resources

- [Nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

Replace lodash.get with Optional Chaining Syntax

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.get](https://lodash.com/docs/4.17.15#get) method from scratch.

Our function takes 3 parameters `obj`, `string` and `defaultValue`.

The primary technique we discuss is splitting the `string` on any kind of separator we might see such as `[`, `]`, or `.` and then filtering out any empty strings we get in our array. Once we have that array of path parts, we can loop through each part with a `for..of` loop then keep reaching into object until we either a) run out of parts to try 🎉 or b) hit a dead end (`null` or `undefined`). The entire function is very simple to write, but can be incredibly powerful when you're safely trying to access large and complex blobs of data that might be coming from a database or server response. 

Build lodash.get from Scratch

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.debounce](https://lodash.com/docs/4.17.15#debounce) method from scratch. **I literally failed a job interview by messing up this question, so watch carefully!**

Debounce is an incredible tool most commonly used to prevent responding too quickly to user input that is in motion. For example, preventing excessive AJAX requests made while a user types into an autocomplete field or quickly responding to window resize events without bringing your browser to a halt.

Our approach is to build the simplest `debounce` method possible using a [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) which gets cleared each time the supplied function is called thereby delaying the execution of our function until input stops for a given amount of time.

The [Lodash implementation of debounce](https://lodash.com/docs/4.17.15#debounce) includes support for a number of options including `leading`, `maxWait`, and `trailing` which we have not covered in this video, but may in future lessons.

### Variations

Modern implementations of `setTimeout` include support for additional arguments which get passed into your function so an alternative to the approach used in this lesson would be `setTimeout(fn, wait, ...args)`

### ES5 Compatbility

If you are in an es5 environment skip the rest/spread syntax and use:

```
var args = Array.prototype.slice.call(arguments)
```

And later, in your setTimeout function:

```
fn.apply(null, args)
```

----

There are some really great resources out there to learn more about debounce, here are my two favorites:

- https://css-tricks.com/debouncing-throttling-explained-examples/
- http://benalman.com/projects/jquery-throttle-debounce-plugin/


Build lodash.debounce from Scratch

This lessons builds on [Build lodash.debounce from scratch](https://egghead.io/lessons/javascript-build-lodash-debounce-from-scratch) to add support for one of its more interesting options: `maxWait`. The `maxWait` option ensures that a debounced method is deferred no longer than the time specified. This is helpful if we need to respond to a long running interaction while it's still in progress. 

In this lesson we'll demonstrate how continuously typing into a debounced input field prevents us from logging any input at all. We'll add a `maxWait` option as a third parameter to our `debounce` function and set it up using an additional `setTimeout` call.

Essentially `maxWait` works by adding a second timer which will fire in the case that the normal debounce timer does not get called. We avoid unnecessarily triggering our debounced function by calling `clearTimeout` in both of our `setTimeout` functions to clear out whichever timer didn't just fire. We also need to set the `maxTimer` variable to `null` to tell our function it's safe to start a new maxWait timer each time either timer fires.


**Notes**

- `setTimeout` returns a timer ID not the actual timer object itself, which is why we have to `null` it out *after* we already call `clearTimeout`
- If you don't `null` out `maxTimer` in your original timer, the maxWait timer will stop triggering after the debounce timer is called the first time. I learned that one the hard way when I first recorded this video.


Extending debounce with a maxWait Option

`_.pick` and its sibling `_.omit` are popular utilities which apply filter-like functionality to objects. This lesson will demonstrate two different techniques for building the functionality found in [_.pick](https://lodash.com/docs/4.17.15#pick).

1. Using `for...of` to loop through the `keys` array
2. Using `for..in` to loop through the target object

This lesson will also cover how to emulate `_.pick`'s support for either an array or multiple arguments for the picked keys using [Rest params](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) and [Array.prototype.flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat).


Build lodash.pick from Scratch

`_.omitBy` and its sibling `_.pickBy` are popular utilities which apply filter-like functionality to objects. Both of them accept a function to determine if a given entry in the object should be included in the output object. This lesson will demonstrate an approach to build both of these utilities from a single function using the combo of `Object.entries` and `Object.fromEntries`.

`Object.entries` converts an object into an array of key, value pairs. We couple that with the native Array filter method, to create a generate `filter()` method that works on objects. Once we've filtered our object we use `Object.fromEntries` to convert the array back into an object. This works great for both `omitBy` and `pickBy`.

**Note**

`Object.fromEntries` is part of the ES2019 spec and may need [a polyfill](https://github.com/ungap/from-entries) to work depending on your environment.

---

- [MDN Guide: Object.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
- [MDN Guide: Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)



Build lodash.omitBy and lodash.pickBy with Object.fromEntries

Payments infrastructure for the internet.

stripe

Stripe has a variety of solutions that makes it super powerful as a payment provider. We're taking advantage of their Stripe Checkout product because it allows us to get started with an online store without having to manually accept payments.

To do this though, Stripe Checkout relies on the browser to make API requests, which we have to configure to work for our website.

We will set our eCommerce site domain on Stripe's CLIENT-ONLY integration to set us up to add the checkout workflow for our site.

Configure a Stripe Checkout Domain for Client-Only Integration

Next.js is a minimalistic framework for server-rendered React applications.

With Stripe or many other services, their APIs rely on special keys that authenticate requests or allow that service to track usage for things like billing.

Some of these keys are able to be used publicly and some must be kept private, but ultimately we want to have a way to easily manage these keys and not hard-code them into our application, which is where environment variables come in.

We will find our Stripe public key that will be used locally as well as in production on Vercel. You'll learn how to set an environment variable in Next.js (hint, you need to prepend `NEXT_PUBLIC` to the variable name make it available in the client) as well as in production on Vercel.

Add a Stripe API Key as an Environment Variable in Next.js & Vercel

Now that we have an app and our products configure in Stripe, it's time to connect the two and give people a way to purchase our products.

Using Stripe's API, we can initiate a new instance of the Stripe Checkout flow with a simple click of a button.

We'll create an `initiateCheckout` function that handles this flow for us. After loading stripe through `@stripe/stripe-js` we'll `await` a `stripePromise` that will allow us to redirect to stripes checkout flow. You'll notice that we will need to pass in line items with the price id and quantity.

Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

A modern JavaScript utility library delivering modularity, performance & extras.

lodash

This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style. We will start by looking at how many people traditionally write JavaScript `for` loops and then talk about the alternate style and benefits that Lodash offers.

Lodash: Refactoring Simple For Loops

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Lodash has an enormous amount of utility functions for dealing with collections and objects in javascript. You can use it in your AngularJS applications to "debounce" user input, or add delay between user actions. This is a common technique for text input to hold firing service calls until the user stops typing for a fraction of a second.

Debounce (delay) User Input in AngularJS with Lodash

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gist.run to share a running version of your code

WebStorm - Sharing a Gist

Imagine if looking at your business logic read as simple as a story from a children's book. That's exactly what we'll cover by learning how to compose small pieces of business logic and also set them up for further composition in the future.

We're showing a list of fictional tweets in a trivial React component created with create-react-app, however the example is not React specific and can be applied to any framework/environment.

Our example will refactor out business logic from a non-composable function to small composable pieces. To accomplish this we'll be using flow, filter and map from lodash/fp, which is included in the regular lodash npm package.

This approach works well in any environment where you're not relying on object references to your original data, as our functional approach creates new collection objects instead of mutating them.

Guide to lodash/fp: https://github.com/lodash/lodash/wiki/FP-Guide


Refactor Business Logic to Composable Functions with Lodash

Lodash's "sortBy" method helps you sort data in your collections and "sortedIndex" helps you find where to place new data. In this video, John walks you through how to use each of these methods and how they can work together.

Lodash - sortBy and sortedIndex

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

WebStorm - Managing Imports

A quick tutorial covering installing Karma and running tests from the command line and Webstorm.

Topics

Instructors

Content Type