Egghead Instructor Mike Hartington

Mike Hartington

Constantly sarcastic, developer for Ionic Framework, lover of craft beers, tries to play guitar.



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

Browse Mike Hartington's lessons.

showing 22 lessons...

Create an Overlay Component with the Ionic 2 Overlay API

P

Preview an Angular 2 Mobile App with Ionic Lab

P

Create Angular 2 Mobile Card based layouts with Ionic 2

P

Use Ionic 2 NavController to Manipulate App History

P

Create a Native Mobile Side Menu Layout in Ionic 2

P

Navigate Between Mobile Screens with the Ionic 2 NavController

P

Lazy Load Data with Ionic 2

P

Fetch data from an API using Angular 2 HTTP module

P

Use Sliding Gestures to Reorder an Ionic 2 List

P

Build your first page component with Ionic 2

P

Use the Ionic CLI to Generate Angular 2 Mobile Components

P

Start an Ionic 2 App with the CLI

P

Introduction to Vim Plugins

P

The Vim Config file

P

Configure VIM

P

Copy and Paste inside of Vim

P

Vim's built-in commands

P

Combining Vim commands

P

Saving Files in Vim

P

Vim's different modes

P

Moving around in Vim

P

Intro to Vim

angular2 tutorial about Create an Overlay Component with the Ionic 2 Overlay API

Create an Overlay Component with the Ionic 2 Overlay API

3:56 angular2 PRO

Ionic provides a common API for displaying many overlay components, like Alerts, ActionSheet, Modals, and Popovers. We'll look at a few of the APIs and see how to interact with them. To learn more about these different APIs, be sure the view the documentation on them:

angular2 tutorial about Preview an Angular 2 Mobile  App with Ionic Lab

Preview an Angular 2 Mobile App with Ionic Lab

1:33 angular2 PRO

Ionic’s CSS and JS can detect what platform a user is on, and adjust to make sure you’re getting the correct interface. To preview this locally, you can use the CLI’s --lab flag to see what your app will look like before it’s even deployed to a device.

angular2 tutorial about Create Angular 2 Mobile Card based layouts with Ionic 2

Create Angular 2 Mobile Card based layouts with Ionic 2

2:12 angular2 PRO

Cards have become a common way to handle layout and display information in a easy-to-understand format. Ionic offers utility components that make creating cards straightforward. These components, like ion-card, ion-card-content, and ion-card-header are included in the framework to speed up the development process. There's no JavaScript behind these components, they're really just css driven.

angular2 tutorial about Use Ionic 2 NavController to Manipulate App History

Use Ionic 2 NavController to Manipulate App History

2:32 angular2 PRO

Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the documentation

angular2 tutorial about Create a Native Mobile Side Menu Layout in Ionic 2

Create a Native Mobile Side Menu Layout in Ionic 2

3:26 angular2 PRO

Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead.

angular2 tutorial about Navigate Between Mobile Screens  with the Ionic 2 NavController

Navigate Between Mobile Screens with the Ionic 2 NavController

3:06 angular2 PRO

Ionic 2 has it’s own navigation system that that makes it straightforward to link components. We’ll look at how to take data from one template and pass it to another using Ionic NavController.

Instead of thinking in terms of URLs and hrefs, NavController allows devs to think in terms of a component stack. To navigate forward to a new view, a developer pushes a new component on to the navigation stack. To go back, the component is popped from the stack. This push/pop metaphor is borrowed from traditional native development and allows for a more flexible navigation paradigm.

angular2 tutorial about Lazy Load Data with Ionic 2

Lazy Load Data with Ionic 2

2:25 angular2 PRO

A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.

Infinite Scroll and Refresher can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

angular2 tutorial about Fetch data from an API using Angular 2 HTTP module

Fetch data from an API using Angular 2 HTTP module

1:43 angular2 PRO

A typical app will interact with some sort of remote API at some point. We’ll creating a simple provider class to fetch data from the Random User API and populate our apps UI with this data.

The IonicModule in this lesson provides some default Angular modules for convenience. As of Ionic 2.x.x, those modules include Angular's BrowserModule, HttpModule, FormsModule, and ReactiveFormsModule

angular2 tutorial about Use Sliding Gestures to Reorder an Ionic 2 List

Use Sliding Gestures to Reorder an Ionic 2 List

3:11 angular2 PRO

Gesture driven lists are a great way to take a simple UI element and make it fun. We'll look at how we can make swipe-able list items to reveal additional functionality, as well as being able to drag and reorder list items.

angular2 tutorial about Build your first page component with Ionic 2

Build your first page component with Ionic 2

2:07 angular2 PRO

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

angular2 tutorial about Use the Ionic CLI to Generate Angular 2 Mobile Components

Use the Ionic CLI to Generate Angular 2 Mobile Components

2:17 angular2 PRO

In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run ionic g --list in your terminal.

angular2 tutorial about Start an Ionic 2 App with the CLI

Start an Ionic 2 App with the CLI

2:18 angular2 PRO

We’ll go over requirements needed to create a project and how to install the ionic CLI for project creation. Once it’s installed, we’ll start a project, specify an app name, and reuse a starter template for our project.

otherjs tutorial about Introduction to Vim Plugins

Introduction to Vim Plugins

2:14 otherjs PRO

Vim has the ability to extend its functionality through plugins that can be installed either manually or through plugin managers. We'll setup the vim-plug manager to install plugins for our .vimrc

otherjs tutorial about The Vim Config file

The Vim Config file

1:34 otherjs PRO

Now that you know how to enable features in Vim, let's store all of them in one place so we don't need to constantly set them all the time.

otherjs tutorial about Configure VIM

Configure VIM

1:16 otherjs PRO

Vim's defaults leave the editor in a pretty minimal state. Let's look at some of options we can configure to make Vim feel more like a traditional editor

otherjs tutorial about Copy and Paste inside of Vim

Copy and Paste inside of Vim

0:55 otherjs PRO

Sometimes you just need to copy some code from one file to another. Vim allows you to do this, in a quick and efficient way.

otherjs tutorial about Vim's built-in commands

Vim's built-in commands

1:19 otherjs PRO

Vim likes to keep you in normal mode at all times. But this can be difficult when trying to delete or change some text in a file. Thankfully Vim has build commands to make this a breeze

otherjs tutorial about Combining Vim commands

Combining Vim commands

1:31 otherjs PRO

We've gone over some of the basic Vim key commands, but what else can you do with them? We'll go over how you can compose them and to create more powerful commands

otherjs tutorial about Saving Files in Vim

Saving Files in Vim

1:01 otherjs PRO

We've learned how to add text in Vim using insert mode, now what about saving that file? We'll go over how to use Vim's write command.

otherjs tutorial about Vim's different modes

Vim's different modes

1:52 otherjs PRO

One of Vim's most unique features are it's different modes. Learn how to use these modes and speed up your editing

otherjs tutorial about Moving around in Vim

Moving around in Vim

1:01 otherjs PRO

Learn how to efficiently move around Vim and stop reaching for your mouse

otherjs tutorial about Intro to Vim

Intro to Vim

0:32 otherjs

The Vim editor is a text editor that lives inside of your terminal. Learn how to start Vim, and more importantly how to exit out of the editor!

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