Learn Android, Grep and Particle

A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.


HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Optimize User Experience for Mobile Devices and Browsers

CMD+F in your text editor can only get you so far! In this course, we will learn to use grep and find, two powerful command-line utilities, to search through and explore our codebase. Learn to search specific files and folders, using regular expressions to look for -- or ignore! -- particular phrases. We'll cover how to search recursively, get more context on your results, and some simple tricks to make your searches faster and more targeted.


Once you're familiar with grep and find, you'll be able to quickly answer questions such as: Do I use this function anywhere other than my tests? Where does this file get imported? Whether you're working on a new feature, reading a codebase for the first time, or refactoring existing code, grep and find can help you work faster and more effectively.

A Unix command used to search files for the occurrence of a string of characters that matches a specified pattern.

grep

Use Grep for Fast Search from the Command Line

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

Translate common Java/Android APIs into NativeScript for Angular Android apps

One of the exciting benefits you have with NativeScript is the ability to write native code (Java and Objective C) directly in JavaScript/TypeScript allowing you to create a consistent high level api over top of both underlying iOS Objective C/Swift and Android Java apis. In this lesson, we will look at how to design a consistent api that taps into the appropriate native api’s on the target platforms using underlying native libraries.

Develop a consistent plugin api across your Android and iOS NativeScript app

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to [install tns-platform-declarations](https://www.npmjs.com/package/tns-platform-declarations) to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

Prepare for native iOS and Android api intellisense with NativeScript

Sometimes you'll be looking for a string, but won't know which file it's in; or you'll want to find all usages of it within a directory. Learn how to use grep -r to recursively search all the files in a directory. 

Search directory contents recursively using grep

Learn how to use find to identify filenames matching specified patterns. We'll use find to identify all .jsx files in a directory, or all test files in a directory.

Use find to search for filename patterns

Learn to use git grep to only search through the tracked files in a git repo. This is especially useful when you want to exclude build artifacts or locally installed dependencies, such as webpack bundles or the node_modules directory. You'll also note that git grep is automatically colorized - we'll see how to get the same coloring effect with grep --color.

Search the contents of a git repository with git grep

By default, grep displays the file path and the line where a match is found. Learn to use the flags -A, -B, -C, and -n to get more context, and view line numbers as well as the lines surrounding a pattern match.


Show context around matches using grep

By using wildcards and glob patterns with the special characters . and *, you can create regular expressions that describe what kind of text you're looking for, instead of just plaintext strings. 

Search for basic patterns using grep

Learn to use grep's extended regular expressions to describe more complex patterns. The `?` and `+` special characters describe optional patterns. The `?` character matches zero or one instance of the preceding term, and the `+` character matches one or more instances of the preceding term. To use these characters, you'll need to either escape them with backslashes or turn on extended regular expressions with the `-E` flag.

Use grep's extended regular expressions to find complex patterns

Learn to use the special anchor characters `^` and `$` to indicate the beginning and end of lines when writing regular expressions for grep. These line anchors are part of basic regular expressions in grep, so you don't need to escape them.

Specify line beginning and end in patterns using grep

You can describe classes of characters using bracket expressions. We'll use expressions such as [a-zA-Z] and [0-9] to search for alphabetic and numeric characters with grep.

Match classes of characters using bracket expressions with grep

Building a custom NativeScript XML view component for Android is uniquely different than it’s iOS counterpart because of the Android Context which must be considered. Let’s look at how to properly build a custom view component based on an underlying native view widget. We will also look at what happens when our include.gradle file is not setup properly including handling problems with minimum sdk targets with plugins. Specifically, we will implement this Android widget representing the [Google I/O 2016 clock](https://github.com/lypeer/GoogleClock). Learn how to create a custom AndroidManifest.xml inside your plugin to merge with your app's manifest to override certain characteristics. Read detailed documentation about the [Android app manifest file](https://developer.android.com/guide/topics/manifest/manifest-intro.html).

Build a custom NativeScript view component for Android

Describe optional patterns with grep OR using the vertical bar character `|`. By using the `|` special character, you can write either-or style patterns. In this lesson we'll look for matches on "grey" or "gray". Like the `+` and `?` characters, the `|` character is part of extended regular expressions with grep, so you'll either need to escape it with a backslash, or use the -E flag.

Search for optional patterns with grep OR

By grouping your searches with parentheses, you can create even more complex searches. Grouping lets you separate out different parts of your regular expression, and apply special characters like +, ?, and * to groups of search terms.

Search with groups using grep

 Learn the basic syntax for using grep to search the contents of a single file or files. It's like CMD+F, but better! You'll be able to quickly see all matching results in a file.

Search the contents of files using grep

Learn to use the xargs Unix command to combine find and grep. First we can use find to identify which files we want to search; then we can use xargs to tell grep which files to search through.

Search matching files by combining find and grep with xargs

What happens when you want to find things that don't contain a pattern? The -v flag lets you use grep in inverse mode. We'll use grep -v against find's output to exclude files in node_modules.


Find matches excluding a pattern with grep

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.


Topics

Instructors

Content Type

Free or Pro