Learn Egghead, Ionic and Reactfire

Theming Ionic applications is a topic that is often left undiscussed. Ionic has a robust API to theme your application so you don't have to settle with the default styles.

This course will show you how Ionic’s theming system works so that your application can have its unique look. It will explore the built-in utilities, which you can leverage directly.

You'll be introduced to the built-in CSS utilities that Ionic provides, Ionics grid system, and Ionic configuration settings to create a custom look and feel to your App.

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Style and Theme Ionic v3 Applications

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently frameworks, such as Ionic and React Native, have been come out to create a similar web development workflow in a native environment. 

Ionic 2 builds on top of Angular to offer a complete framework for building mobile apps using HTML, CSS, and Javascript that target native mobile and the browser. We’ll work with the RandomUser API to create an employee directory that will let us view user details, update that information, and pass the data back and forth with Ionic 2 routing.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Building apps with Ionic 2

This is the video companion to the [egghead.io Instructor Guide](https://howtoegghead.com/instructor/).

Screencasting is hard! There are virtually infinite ways to produce one. For an egghead.io lesson we expect several key aspects to be met. We want to make sure that our lessons have depth and clarity. Clarity is important and starts with the technical aspects of recording your screen and voice. Once we have achieved this objective level of clarity, we dip into the stylistic aspects of recording a lesson. The style is subjective, and the goal of an egghead.io lesson is not to have an army of uniform drone producing flavorless video content for the masses.

Our mission is to make you a badass screencaster. We want to push you to another level. We've found that a small set of standard practices will create an awesome experience for the student, and eliminate frustration as we teach by providing a repeatable pattern for success. It’s not complicated. In fact, it is simple, but it isn’t easy.


This course will show you how to produce an egghead.io lesson. We strive for consistency in style, and these lessons will demonstrate the core elements that create our brand screencasts. Let’s learn how together.

Bite-size video tutorials for badass web developers.

egghead

Record Badass Screencasts for egghead.io

Ionic allows you to build cross platform native applications using Angular. In this course we will convert the Eggly AngularJS application into an Ionic mobile application.

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

Building an Angular 1.x Ionic Application

Welcome to the *Ionic Quickstart* series where you will learn how to get started with Ionic from the ground up. We will begin with how to install the required dependencies such as Node.js, Android SDKs and even GenyMotion to installing and running Ionic. By the time you finish, you will know how to create, edit and run an Ionic application. If you are on Windows or Mac and not sure where to start with hybrid mobile development, this is a great place to start!

Ionic Quickstart for Windows and Mac

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

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

Tips and Tricks

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

chrome-devtools

Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happening. What is it doing, and why is it so slow?

This lesson is a real-world performance diagnosis of this very page, right here on egghead. Two infinite (but hidden) animations were causing CPU usage to spike, and Chrome's Task Manager and Performance tools helped uncover the elements causing the problem. You'll see how to use the profiler to record a snapshot, and learn a trick for discovering animations running in the background.

Diagnose a Slow Page Using Developer Tools

codesandbox.io provides one of the fastest ways to start a new React project. In this lesson, we will take a first look at codesandbox, its interface, and the default React project it creates.

Use Codesandbox to Start a New React Application

Learn how to install the Ionic 4 CLI and validate its installation.

Install the Ionic 4 CLI

Learn how to create and use the Ionic Floating Action Button (FAB) in your Ionic 4 application.

Position an Ionic 4 Floating Action Button (FAB) Component in an App

Learn how to create and use the Ionic List component in your Ionic 4 application.

Display Data with Ionic 4 List Component

Learn how to create and use the Ionic Badge component in your Ionic 4 application.

Compose Inline Elements with Ionic 4 Badge Component

Learn how to use the Ionic 4 Actionsheet component to allow for more options than the standard Alert component.

Using the Ionic 4 Actionsheet Component

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

Creating cross-platform web-based applications with Ionic 4 and React is easy thanks to the Stencil compiler and `create-react-app`.

In this video, we look at how to use create-react-app and @ionic/react to make an Ionic 4 + React application

Create an Ionic 4 application with React

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Creating cross-platform web-based applications with Ionic 4 and Vue is easy thanks to the Stencil compiler and the Vue.js CLI.

We look at how to combine these together to use Ionic 4 components within our Vue.js applications.

Create an Ionic 4 application with Vue.js

Learn the changes to the Ionic button component that were introduced in version 4. Understand how to change the style and size of the button and how to quickly include an icon.

Using the Ionic Button Component

Understand the basics of the Ionic Card component. See how images are handled within the card, and how to use its sub-components like title, subtitle, and content.

Using the Ionic Card component

By re-assigning a couple mouse buttons, you can drastically improve the speed you can edit your lessons in Screenflow. This lesson shows how to customize using the Logitech software, but the concept should work for any mouse customization software as well.

Faster Edits in Screenflow with Mouse Customizations

Sometimes you have an idea that you want to quickly record, but the idea of setting up a project just to get it recorded gets in your way. I'm going to walk your through scripting away the main setup pain points so that you can focus on creating content.

Automate egghead Lesson Setup with ZSH Shell Functions

When making your font sizes large, your code will often get to long to fit on the screen. This lesson shows you how to use "word wrap" or "prettier print width" to adjust your code to fit within the editor.

Reformat Code to Fit the Screen

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

In this lesson, we will learn how to use custom ENV variables to customize the PS1 Bash/Zsh command prompt in the VS Code terminal, without affecting our custom terminal themes in other applications. We will see how this can be useful for keeping the terminal clean for screen recordings.

I'm using Zsh in this video, but this works in Bash with `~/.bashrc` as well.

Topics

Instructors

Content Type