Egghead Instructor Shane Osbourne

Shane Osbourne

Shane is a frontend web developer working at UK-based http://wearejh.com. Focussed primarily on Javascript tooling, he's the creator of http://browsersync.io and a regular contributor to many open source projects.



Unlock all of Shane's PRO Lessons
click for instant access!

Browse Shane Osbourne's lessons.

showing 28 lessons...

Gulp and Browserify - Initial Setup

Gulp and Browserify - Hooking up Watchify

P

Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Babel & Source Maps

P

Use Concat to Add Values to an Array

Combine Values of an Array into a String with Join

P

Check if a Value is in an Array with indexOf

P

Create a Shallow Copy of an Array with Slice

P

Trying new versions of Node.js with NVM

P

Sort an Array Alphabetically or Numerically

P

Intro to Recursion - The Problem

Intro to Recursion - The Solution

Intro to Recursion - Refactoring to a Pure Function

Filter an Array with Truthy Values

Intro to Recursion - Detecting an Infinite Loop

P

Use Some as a Ternary Operator or Conditional

P

Event Delegation with RxJS

P

Reacting to multiple inputs using RxJS's combineLatest

P

Using Observable.create for fine-grained control

P

Add Elements onto an Array with Push

Introduction to Generics in Typescript

Understanding Generics with RxJS

P

Function Overloads in Typescript

P

Modify Values in an Array with Map

P

Safer property access with Lodash's 'get' method

Validate Data with the Every() Method

Updating nested values with ImmutableJS

Produce a single value from an Array with reduce

js tutorial about Gulp and Browserify - Initial Setup

Gulp and Browserify - Initial Setup

2:21 js

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 dist directory.

js tutorial about Gulp and Browserify - Hooking up Watchify

Gulp and Browserify - Hooking up Watchify

3:31 js PRO

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.

js tutorial about Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Live Reload with Browsersync

3:08 js

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.

js tutorial about Gulp and Browserify - Adding Babel & Source Maps

Gulp and Browserify - Adding Babel & Source Maps

4:30 js PRO

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using exorcist.

js tutorial about Use Concat to Add Values to an Array

Use Concat to Add Values to an Array

4:38 js

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 forEach

js tutorial about Combine Values of an Array into a String with Join

Combine Values of an Array into a String with Join

4:42 js PRO

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.

js tutorial about Check if a Value is in an Array with indexOf

Check if a Value is in an Array with indexOf

5:21 js PRO

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.

js tutorial about Create a Shallow Copy of an Array with Slice

Create a Shallow Copy of an Array with Slice

9:15 js PRO

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 map & reduce.

node tutorial about Trying new versions of Node.js with NVM

Trying new versions of Node.js with NVM

4:26 node PRO

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

js tutorial about Sort an Array Alphabetically or Numerically

Sort an Array Alphabetically or Numerically

6:23 js PRO

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 map and join.

js tutorial about Intro to Recursion - The Problem

Intro to Recursion - The Problem

6:15 js

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.

js tutorial about Intro to Recursion - The Solution

Intro to Recursion - The Solution

4:39 js

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.

js tutorial about Intro to Recursion - Refactoring to a Pure Function

Intro to Recursion - Refactoring to a Pure Function

3:37 js

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.

js tutorial about Filter an Array with Truthy Values

Filter an Array with Truthy Values

6:44 js

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.

js tutorial about Intro to Recursion - Detecting an Infinite Loop

Intro to Recursion - Detecting an Infinite Loop

5:39 js PRO

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.

js tutorial about Use Some as a Ternary Operator or Conditional

Use Some as a Ternary Operator or Conditional

5:43 js PRO

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 yes or 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 if conditional.

rx tutorial about Event Delegation with RxJS

Event Delegation with RxJS

6:17 rx PRO

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

rx tutorial about Reacting to multiple inputs using RxJS's combineLatest

Reacting to multiple inputs using RxJS's combineLatest

7:36 rx PRO

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.

rx tutorial about Using Observable.create for fine-grained control

Using Observable.create for fine-grained control

3:55 rx PRO

Sometimes, the helper methods that RxJS ships with such as fromEvent, 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.

js tutorial about Add Elements onto an Array with Push

Add Elements onto an Array with Push

3:26 js

Array push is used to add elements to the end of an Array. In this lesson we'll see how the push method accepts multiple arguments, can be used to merge two arrays, and how it can be used to represent user input.

typescript tutorial about Introduction to Generics in Typescript

Introduction to Generics in Typescript

3:22 typescript

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.

typescript tutorial about Understanding Generics with RxJS

Understanding Generics with RxJS

7:12 typescript PRO

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.

typescript tutorial about Function Overloads in Typescript

Function Overloads in Typescript

3:46 typescript PRO

It's common in Javascript for functions to accept different argument types and to also return different types. In this lesson we learn how to 'teach' Typescript about these dynamic functions so that we can still benefit from the powerful static type analysis.

js tutorial about Modify Values in an Array with Map

Modify Values in an Array with Map

9:26 js PRO

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.

js tutorial about Safer property access with Lodash's 'get' method

Safer property access with Lodash's 'get' method

8:36 js

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

js tutorial about Validate Data with the Every() Method

Validate Data with the Every() Method

6:04 js

The 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.

js tutorial about Updating nested values with ImmutableJS

Updating nested values with ImmutableJS

6:27 js

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 instead. 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.

js tutorial about Produce a single value from an Array with reduce

Produce a single value from an Array with reduce

8:32 js

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?