Learn Firefox, Lodash and Sequelize

[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

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects.  This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool.  Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect.  This can be a great resource for learning more about how to write accessible code.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

tota11y is a great tool to add to your accessibility auditing toolkit.  tota11y is a browser extension available for Chrome and Firefox that helps visualize accessibility violations (and successes), while educating on best practices.  It can make for a really helpful supplement to other accessibility auditing tools.

## Resources
* [About tota11y](https://khan.github.io/tota11y/)
* [Chrome browser extension](https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/)

Use tota11y to Visualize Accessibility Issues

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Cascading Style Sheets bring order and beauty to our applications.

Firefox DevTools has an awesome feature that helps you determine Inactive CSS, to know why it's inactive, it gives you hints on how to fix it, and even links to documentation for additional help.

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

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

CSS Media queries are heavily used across web pages for different reasons, such as make your web pages responsive, but what if we can use them to improve web accessibility as well?

In this video, I’m sharing How to use CSS Media Queries for web accessibility in your web app, combining the user preferences choice with `prefers-color-scheme` media query and enabling dark mode in your web app.

Create a Dark Mode Theme in Your Web App Using CSS Media Query

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

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

Sequelize is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.

sequelize

Sequelize attribute getters and setters are a convenient way to encapsulate extra logic for model properties. In this video, we'll cover adding getters and setters to enhance and even virtualize a column.

Sequelize: Getters, Setters and Virtual Columns

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

The React Developer Tools are an extension that can be added to Chrome and Firefox to help with debugging React applications. In this lesson, we walk through how to use these developer tools to view, edit, and debug your React components, including: the `React` browser tab, inspecting components in parallel with the `Elements` tab, using React components in the console, searching by component name, and debugging component state and props.

Debugging components with the React Developer Tools extension

Property access in Javascript can be problematic - especially when dealing with nested Objects and Arrays. Doing it manually and in a safe manner requires tons of boilerplate inside conditionals and results in a defensive style of coding. In this lesson we look at why this is a problem & how to overcome it using the `get` method from the popular utility library `Lodash`

Safer property access with Lodash's 'get' method

Models in the Node.js ORM, Sequelize, can be expanded with both class level and instance level functions. This video will show you how to extend your models to add helpers or business logic, and explain the methods execution scope.

Topics

Instructors

Content Type