showing 28 lessons...
Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single
bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by
gulp.dest and finish by writing the bundle to a
Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task
watch & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.
Building upon the
watch task that we begin this lesson with, we’ll look at how to create a local development server using the
app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public
.stream() method that is designed exactly for this purpose.
Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as
The join() method joins all elements of an array into a string. In this lesson we first look at why
join is often a better option than regular string concatenation. Then we move onto an example which shows a simple way of storing lines of text in an array and outputting them with a new line separator and we finish by looking at ways to chain multiple array methods together.
indexOf is used to search for a value or reference inside of an array. In this lesson we first look at what values are returned when a search is successful vs when it's unsuccessful. Then we move onto a technique that shows how to use the return value to create a boolean flag that can be checked easily. We end by filtering 1 array based on the existence of a value in a whitelist array.
Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how
slice fits into a workflow that contains other array methods such as
It's possible to install and run multiple versions of Node.js using a project called NVM. In this lesson we'll walk though the installation, how to try out Node.js version 4.0.0 & even how to configure Webstorm to use any nvm-installed version. Note: NVM works on Mac OSX and Linux only. For a Windows version (with the same commands) see https://github.com/coreybutler/nvm-windows or https://github.com/hakobera/nvmw
Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only
sort in action, but also how it can be chained together with other array methods such as
Recursion is a technique well suited to certain types of tasks. In this first lesson we’ll look at solving a problem that requires the flattening of arrays without using recursion. Showing the shortcoming of a non-recursive solution first will help you to understand why it’s so valuable and why sometimes it's the only solution to many problem.
In this lesson we manage to remove all of the nested loops that helped us towards a partial solution in the first lesson. We create a function
getTasks, that can, only under certain conditions, call itself. This is the basis of recursion and often leads to cleaner, shorter code that can handle more dynamic input.
Our previous solution used
forEach and a globally available array that could be mutated from inside our function. We can improve upon this and create a function that is easier to maintain & test by swapping our
forEach loop for
reduce. By removing the global array and instead making
getTasks return a value directly we end up with a pure function.
Array filter creates a new array with all elements that pass the test implemented by the provided function. In this lesson we discuss how only a truthy or falsey value is required as the return value to the function, which in turns allows us to be creative in how we perform the filter. We end the lesson by looking at an example showing how chaining multiple array methods together can lead to very nice, declarative code.
When using recursion, you must be mindful of the dreaded
infinite loop. Using the recursive function that we’ve built up over the previous lessons, we look at how a simple duplicated configuration item could cause chaos for our program as it has no context of which items it has previously seen. We fix this problem by introducing a
parents array, which can keep track of which top-level commands have already been accessed.
some returns a
boolean value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple
no answer. In this lesson we look at 2 practical use-cases for
some. The first shows how it can be used with a ternary operator to switch a
class on an element & the second shows how
some can be used in an
Event delegation is an extremely powerful technique. It allows you to use a single event handler to listen to events on any number of child elements. It also has the added benefit of working with dynamically added elements without even a single line of additional code. Libraries such as jQuery offer this feature right out of the box, but with RxJS and the
fromEvent helper, we’ll need to utilise the
selector function to achieve the same result. NOTE: The
element.closest method shown in this video required a polyfill for older version of IE which can be found here https://github.com/jonathantneal/closest
There are certain situations in which you’ll want access to the latest values from multiple Observables whenever any one of them produces a value. This is exactly what
combineLatest was designed for, and in this lesson we’ll use it to build up an image url that requires values from 3 different inputs - triggered every time any one of them change.
Sometimes, the helper methods that RxJS ships with such as
fromPromise etc don't always provide the exact values you want & you end up having to do extra work to force them into the shape you require. For more fine-grained control you can use
Observable.create which allows you to project only the values which matter to you.
If Typescript is the first language in which you've encountered generics, the concept can be quite difficult to understand. We skip the lecture in this lesson and dive straight into a real-world use-case that is guaranteed to help you understand the need for generics.
Libraries such as RxJS use generics heavily in their definition files to describe how types flow through different interfaces and function calls. We can provide our own type information when we create Observables to enable all of the auto-complete & type-safety features that you would expect from Typescript. This can be achieved with minimal annotations thanks to the power of generics.
Map is one of the most useful array methods. It creates a new array with the exact same number of items as the source and can be used to modify values, change their type, add fields to objects, simplify objects etc. In this lesson we focus on practical use-cases for map & see it in conjunction with other array methods.
get method from the popular utility library
every method returns true or false based on whether or not every item in the array passes the condition you provide in a callback function. In this lesson we look at some practical examples for simple validation, inferring state from data and for re-using the logic in our callbacks with array filters.
The key to being productive with Immutable JS is understanding how to update values that are nested. Using
setIn you can place a new value directly into an existing or new path. If you need access to the previous value before setting the new one, you can use
updateIn accepts the same path lookups as
setIn, but gives you a callback function instead so that you can use the previous value however you wish and return an updated version.
Array reduce is used to accumulate a new value by applying a function that you provide to each item in your source array. Reduce behaves differently based on whether or not you provide an initial value - we cover this in depth in this lesson and provide some practical use cases.