Learn Angular-material, Electron and Jekyll

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

Create A Blog With Jekyll

Electron is a framework that makes it easy to create cross-platform desktop apps with JavaScript, HTML, and CSS. Electron and open-source tools give you everything you need to create a compelling desktop app--native user interface elements like menus and dialogs, installers, auto-updates, and more. 

This course will teach you the core concepts of Electron so that you can leverage it to create your own desktop application for macOS and Windows. 

We'll go over:
- Creating user interfaces in Electron (both HTML based and native)
- Understanding Electron's multi-process architecture 
- Shipping your app to users

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.

electron

Build a desktop application with Electron

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.

In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.

*presented by Thomas Burleson and Aaron Frost*

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

Introduction to AngularJS Material

The Angular Material Layout API wraps the flexbox CSS features with an amazingly easy, powerful HTML markup API. The Layout API hides the complexities of the CSS, is intuitive to use, and eliminates the need for developers to become flexbox experts to implement modern page layouts. 

In this lesson we will learn how to use the Angular Material Container components and the Layout API to implement the layouts specified in design wireframe.

> This course has been created by Thomas Burleson and Aaron Frost. 

Angular Material: Containers with the Layout API

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows. 

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.  

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

> This course presented by Thomas Burleson and Aaron Frost

Angular Material: Theming and ARIA

Learn how to install Angular Material with `npm install`  and load the required libraries and stylesheets into your blank web page.

> This course has been created by Thomas Burleson and Aaron Frost

Angular Material: Installing with NPM

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

This lesson explores the Angular Material sidenav component. This includes input and display options, creating a sidenav with a nav list, and utilizing the `@angular/cdk` to update sidenav settings based on the users screen size.

Use the Angular Material Sidenav Component

In this lesson we’ll load javascript into the BrowserWindow and display the Electron version on the page. Loading javascript into Electron is almost exactly the same as loading it into the browser, however it is a best practice to use the `require` syntax.

Load JavaScript in an Electron BrowserWindow

A main menu is a hallmark of native desktop applications. Electron makes it easy to create native menus and menu items in JavaScript.

We’ll go over creating a menu template using `Menu.buildFromTemplate` and then setting it as the main application menu via `Menu.setApplicationMenu`. 

Create a native desktop system menu with the Electron Menu module

In this lesson we'll learn about `dialog.showMessageBox` . This is the most basic Electron dialog but it offers lots of customization options, such as `type`, `icon`, `title`, and `buttons`. Some of these options vary by platform, so we'll also look at how things differ between Windows and Mac. 

Display native desktop dialog windows with Electron

In this video, we'll learn how to save and open a file using native dialogs in Electron. First, we'll use `dialog.showSaveDialog` to display a native save dialog and use `dialog.showErrorBox` to display an error message if the save failed. Then, we'll open the file we saved using `dialog.showOpenDialog`. Finally, we'll look at how these dialogs look on Windows vs Mac.

Save/Open a file with an Electron dialog window

Dealing with multiple processes in an application is new for many JavaScript developers. We’ll go over what exactly a process is and what the primary responsibilities of the main and renderer processes are. The main process is primarily responsible for creating native UI elements and managing the application lifecycle, while the renderer process runs the HTML based UI. Accordingly, different APIs are available in each process. 

Understand Electron’s main and renderer process architecture

In Electron, we often need to coordinate actions between multiple processes. For example, if a user clicks a button in a renderer process that makes a new `browserWindow` open, we need to be able to send a message to the main process that triggers this action. We’ll look at how to do just that using the `ipcRenderer` and `ipcMain` modules.

Communicate between Electron processes using IPC

`remote` allows you to seamlessly interact with main process modules as if they were in the renderer process. It’s a super useful abstraction over IPC. We’ll learn how to use it and how to avoid some potential gotchas it has. 

[Devtron](https://electron.atom.io/devtron/) is a devtools extension that the Electron team has made. We’ll be using it to view all of the IPC that happens in our application. In this lesson we’ll learn how to include and use it in our code. 

Communicate between Electron processes using the remote module

Every Electron application needs a custom icon. Mac needs an `icns` file and Windows needs an `ico` file. We'll learn how to use a npm module, `electron-icon-maker`, that takes a 1024x1024 PNG and then outputs all the files we need. 

Create an icon for your Electron app

We’ve been running our app in a development environment using the Electron executable. Now let’s learn how to package our app into a `.app` or `.exe` file so that we can distribute it to other users. Electron doesn't provide this functionality out of the box, so we'll use a popular and easy-to-use npm package called [electron-builder](https://github.com/electron-userland/electron-builder) to handle the details. electron-builder will automatically grab our `.ico` or `.icns` file and use that as our app's icon. 

Package your Electron application into a executable file with electron-builder

Code signing ensures that your app was created and distributed by you or your company and has not been modified since it was built. It is done via a special code signing certificate issued by a trusted authority. While you can distribute your Electron app without signing it; code signing is a security best practice and is a prerequisite to implementing auto-updates in your app. We’ll walkthrough how to integrate code signing into your electron-builder build process, what happens when you don't sign your application, and how to verify it's been signed correctly. 

This lesson assumes that you have already purchased code signing certificates from Apple and one of Microsoft's trusted vendors and have exported the certificate as a `p12` or `pfx` file. 

Code sign your Electron application with electron-builder

Once users are using your app, you need a way to ship new features and fixes to them. In this lesson, we’ll learn how to implement auto-updates in your app, which allows you to distribute updates to your application seamlessly. We'll go over how to integrate with Electron's `autoUpdater` module to check for an update and display a prompt to update once it's been downloaded. For our server side implementation we'll just use a plain file server to keep things simple. 


Ship updates to your Electron app with `autoUpdater` (Mac)

In this lesson, we'll go over a few differences in implementing auto-updates on Windows like handling `Squirrel.Windows` startup events and configuring `electron-builder` to build for a `Squirrel.Windows` target.

Ship updates to your Electron app with `autoUpdater` (Windows)

Most Angular Material UI components are declarative and used directly in the HTML markup. Some components, however, are programmatic and must be configured and invoked from Javascript. Programmatic components have a short-term, limited DOM lifespan and include Dialogs, Toast, and BottomSheet.

Let’s use the BottomSheet service to configure and display an Angular Material BottomSheet container which in turn will display a nested, custom Contact Sheet view.

> This course presented by by Thomas Burleson & Aaron Frost.

Angular Material: Using a BottomSheet

Both flexbox CSS and the Angular Material Layout allow web applications to `respond` to the size of the browser at any given point. No matter what the browser width may be, the web app adjusts its layout sizing accordingly. Combine responsive functionality with media query support and your web applications will have `adaptive` features to adapt to the width of the browser at a specific points. More than fluidly adjusting the widths and heights of elements, Adaptive applications can change the rendered UX with new positions, new components, and new styles. Angular Material Layout hides the complexities of implementing adaptive features with a singularly unique and simple HTML syntax.
Let’s use the Adaptive extensions of the Angular Material API to hide the SideNav on small devices (like iPhone or Android). We will explore the use of the $mdMedia service to easily lock open the SideNav on larger devices. And we will see how the $mdSideNav service can be used to programmatically close the SideNav after a user is selected.

> This course presented by Thomas Burleson and Aaron Frost.

Topics

Instructors

Content Type

Free or Pro