showing All 587 lessons...
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
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.
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.
We will learn about using Angular 2's new Event Binding syntax with TypeScript. Learn to bind to DOM events with your Angular 2 application.
You can increase reuse in your codebase by dividing your components into containers and content, or as some people call them, smart and dumb components. This lesson walks through a very simple refactoring to demonstrate this concept and show you how to maximize the portability of your React components.
This video gives an overview of the concepts of reactive programming we saw during this series, and explains how reactive programming can provide true separation of concerns.
In this lesson, we learn how to build the final feature of our user interface: how to use the cached network response to replace a suggested user when the user clicks on the 'x' close button for that user.
This lesson teaches how to control whether network requests are cached or are pessimistically re-executed, with the help of the RxJS merge operator.
Let's fix a small UI glitch that was occurring on startup and whenever the refresh button was clicked. In this lesson we will see how to avoid common bad habits of imperative programming, and how to use reactive programming to keep the complete dynamic behavior of a value specified in one convenient place.
In this lesson we learn how to fetch new data whenever the refresh button is clicked. This lessons starts to give us a feeling of how is it do develop reactive applications in RxJS.
Learn how to take data from a network response and display it on the DOM using RxJS reactive event streams.
In this lesson we start building a small UI widget: suggestions box displaying users to follow in Github. We will learn how to perform network requests to a backend using RxJS Observables.
This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm for programming. See how reactive programming helps you understand the dynamic behavior of a value evolving over time.
This lesson introduces Reactive Programming using RxJS in simple terms, with a concrete example and no scary terminology.
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
In this lesson we'll look at how to animate the adding and removing of components using React-Motion's TransitionSpring and how it differs from a standard Spring component.
In this lesson we'll configure a single react-motion Spring component to manage the animation of multiple elements.
In this lesson we'll configure our React-Motion Spring to animate multiple values simultaneously and also look at how those animations can be more finely controlled by setting our Spring's stiffness and damping values.
Spring is the simplest component available to us in React-Motion. It allows us to transition from a defaultValue to an endValue leaving what to do with that value as it transitions up to us. In this lesson we'll create a simple Spring and use it to update the style of our component.
This lesson shows you how to:
* create a user account on the npm registry
* publish your module to the registry
* use npm version to bump the version number of your package
* publish updated versions of your module to the registry
* unpublish modules from the registry
When you implement a search bar, the user can make several different queries in a row. With a Promise based implementation, the displayed result would be what the longest promise returns. Here we see how RxJs can be used to avoid this problem.
JSPM can handle installed packages, transpiling ES6, and bundling all from the command-line. This video gives a quick overview of install JSPM, installing packages with JSPM, writing a very simple app in ES6 that uses those packages, then bundling up for production.
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.
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.
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
By default, Travis will build all branches, tags, and Pull Requests. Because we're building our master branch before we release, we don't need Travis building our releases. Also, we don't care to have Travis build all the branches. So we're going to limit Travis to only build our master branch and Pull Requests by configuring travis via our
By adding ES6 support to our source code, we need to add that same support to our tests so we can consume that synatx. This is quite easy with the
--compilers flag for
Now that we're keeping track of our coverage, let's upload our reports to a third party service so we can track our stats over time. In this lesson we'll show how easy it is to upload our stats to codecov.io.
Now that we have code coverage being reported, let's make sure that nobody commits code which drops code coverage below our standard by adding a
check-coverage script that utilizes istanbul's built-in
This lesson will utilize the Istanbul tool to instrument our code for code coverage recording and reporting. We'll use this to make sure that as our library gets new features, we keep track of our coverage and can find places to improve it.
Wouldn't it be nice if everyone ran the tests before committing code? With ghooks, you can automatically add a githook when dependencies are installed which will allow you to define common scripts to be run at various points during git actions (like committing). In this lesson, we'll add a githook for running the tests before we commit code to make sure we don't commit anything that breaks the tests.
Now that we have everything set up with semantic-release and we have a feature commit, let's push that up and watch TravisCI use semantic-release do our library release automatically.
In this lesson, we'll add a new feature to our library and use commitizen to generate our commit message that follows the convention for semantic-release to know it needs to bump the minor version.
By making use of closures and lexical scope, we can achieve "private" properties by returning objects with methods from a factory function. By defining our desired "private" variables within our factory function and accessing these variables from within our returned object's methods we create a closure and maintain unique, separate references to our "private" variables.
Mocha is a testing framework that provides structure for unit tests. In this lesson, we will be setting up Mocha with npm and npm scripts, writing a "Hello World" unit test, then writing the code to make the test pass (as an example of Test Driven Development (TDD), with the "red-green-refactor" workflow).
Because semantic-release requires a specific message format, it's easier to follow this convention using a tool called commitizen. In this lesson, we'll use it to write our first conventional commit message.
style attribute. The properties of these style objects are just like the CSS property, but they are camel case (
borderRadius) instead of kebab-case (
In this lesson, you will learn how to build a simple http server that serves different content based on routes (a.k.a. the url requested by the client) as well as the http method used.
There are so many repeated steps when releasing a new version of a library. The tool semantic-release automates this process by pushing off the responsibility of your releases to continuous integration. Trust us, this will change your workflow for the better.
You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features. This lesson shows how to use hjs-webpack to get the same thing in a matter of minutes.
In this lesson, we'll walk through installing a custom color scheme into our WebStorm IDE. Dayle Rees's daylerees/colour-schemes has a great collection of themes ready to install in different formats for various editors.
For this example, we will install the Peacocks In Space theme into an OS X WebStorm 11 EAP installation. Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the JetBrain's family of editors.