Learn A11y, React-native and Vim

A skeleton loader is a popular UI pattern for loading screens: instead of a spinner, we show static or an animated placeholder for the information that is still loading. 

In this course, we go through 3 instrumental libraries for React Native - Linear Gradient, Masked View, and Reanimated 2 - and in the end, we use them in tandem to build a Skeleton Loader.

**Linear Gradient** [Expo](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) | [Pure React Native](https://github.com/react-native-linear-gradient/react-native-linear-gradient)

**Masked View** [Expo](https://docs.expo.dev/versions/latest/sdk/masked-view/) | [Pure React Native](https://github.com/react-native-masked-view/masked-view)

**Reanimated 2** [Expo](https://docs.expo.dev/versions/latest/sdk/reanimated/) | [Pure React Native](https://github.com/software-mansion/react-native-reanimated/)

This course is built using an iOS simulator on plain React Native. Still, it will work on Expo and Android (you'll need to follow the relevant installation instructions available in the documentation).

The finished code for the skeleton loader (last 2 lessons) is available on [Expo Snack](https://snack.expo.dev/@kadikraman/animated-skeleton-loader).

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

Building a Customizable Animated Skeleton Loader in React Native

How to create buttons in React Native depending on the level of desired customisability: the quick and simple Button, a more customisable Touchable, and the most customisable Pressable.

Button component is useful for quick prototyping.

TouchableOpacity is the most common way of creating buttons and other touchable areas, and is suitable for most use cases.

Pressable gives you the most control over the look and feel of your button, including customising the pressed state and text, as well as handling long presses separately from regular presses.

Creating Buttons in React Native with Three Levels of Customization

If you already know React, then React Native is a great way to build mobile apps for iOS and Android. Of course, web and mobile apps are very different to build — but this course serves as your guide.

In this course, we’ll build a mobile app from start to release with React Native for both iOS and Android. Prior React experience is required, but you don’t have to know anything about mobile development to participate.

Throughout the course, we’ll be building a “Restaurant Review” app. We’ll use all the standard mobile UI elements like text, images, form inputs, buttons, scroll views, and icons, and we’ll show several navigation techniques like push, modal, and tabs. The app will make HTTP API calls to a server and will store data on the device with AsyncStorage. Finally, we’ll specify a custom app icon and splash screen, deploy the app to a physical device, and prepare the app for release to the App Store and Play Store or for ad-hoc release.

Build a React Native Application for iOS and Android from Start to Finish

React makes it intuitive to build real-world web application. But in reality, you need to use a host of other services to get the app in front of real users. 

This course walks you through setup and implementation to get your cloud-based application up and running. 

You’ll learn to set up:
* a new project in AWS Amplify configured to your React app
* user authentication with Amazon Cognito 
* managed GraphQL with AWS AppSync
* image storage and retrieval with Amazon S3
* text translation via Lambda functions
* and finally, deployment of your application on AWS using Amazon S3

You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.

Building Serverless Web Applications with React & AWS Amplify

- Web audio APIs include support for features that aren't available by default in the native HTML audio element.
- The operating system includes basic controls
- Custom controls must be accessible with a keyboard, and make sense to a screen reader
- Don't hide the built-in controls until you know that your custom controls are working
- Listening to what VoiceOver reads should inform the a11y information you include
    - VoiceOver says "Elapsed Time" on its own, so we wouldn't want to write it in our code.
- `loadedmetadata` should have the duration to avoid glitches from new audio not being loaded.
- Elements should be labeled with a unique `id`

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

Create an Accessible Audio Player with the HTML Media Element and React

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Vim Videos for Beginners

React Navigation makes the easy things easy and the hard things possible. This course will help you understand how to customize and use React Navigation for more complex navigation patterns.

You'll learn different ways to display content within the navigators, which demonstrates the built-in customizations within React Navigation. As well as learn how to interact with different UI components within React navigation, which will help you structure your application. 

Building off this, you'll learn how you can customize the default navigator behavior to provide a custom look and feel to your React Navigation application

To succeed in this course, you’ll want a basic understanding of the React Navigation API and how to use the default navigators.

Note: React Navigation has been updated to v2. This course was recorded on v1.x and the lesson code has been updated to reflect v2. The principles and patterns taught in the videos remain valid.

React Navigation for Native Mobile Applications

React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application.
Like many React Native elements, the video element is very basic and doesn't ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application.

In this course we'll take a look at a basic setup. Then explore the different ways we can load and show videos. We'll show how to use a few of the custom callbacks to overlay errors and buffering elements. Because there are no controls shipped with `react-native-video` we'll show how to write custom video controls and animate them when the video has not been interacted with.

Finally we'll cover a few common paradigms found in the wild. Including repeating background cover videos, auto-playing videos when they scroll onto the screen and auto-stopping them when they are scrolled away from.

Fundamentals of React Native Video

In this course we'll explore how to create many popular animated concepts in applications across web and mobile applications. We'll look at both simple, complex, and subtle interactions that you can use to enhance your React Native application.


This course should empower you to look at an animation in an application, break down the effect, and rebuild it in your own application.


The ultimate goal is to show how using the basic Animated calls we can build out effective and complex animations that take your application to the next level.

Real World React Native Animations

In this course, we will be building a React Native news app that is read-only when offline. 

The videos are recorded on a Mac with an iPhone 13 Simulator using plain React Native, but you can do this course using Android, Windows and even the Expo managed workflow. See the lesson description for platform-specific instructions. The solutions repo has been verified to work on a Pixel 3a Emulator on Mac.

The completed app for this course is available [here](https://github.com/kadikraman/news-flash) and each lesson will include a link to the commit that added the code so you can check your work.

After we build our news app, we're going to enhance it to make it read-only when offline using urql'g GraphCache.

This course will require you to run the api locally on your device. The api repo is available [here](https://github.com/kadikraman/news-flash-api).

**Resources:**
- urql: https://formidable.com/open-source/urql/docs/
- Insomnia: https://insomnia.rest/
- Async Storage: https://github.com/react-native-async-storage/async-storage
- React Native Netinfo: https://github.com/react-native-netinfo/react-native-netinfo

Build a News App with React Native, GraphQL and TypeScript

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like `timing` and `spring` to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

Animate React Native UI Elements

Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.

React fully supports building accessible websites, often by using standard HTML techniques.

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for auditing react apps for accessibility. In this course, you will go through different tools and libraries to audit components in a React app.

Fast, easy and reliable testing for anything that runs in a browser.

cypress

Auditing React Apps for Accessibility 

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.


We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.

The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

Build a React Native Todo Application

Vim is a classic text editor that saw its first incarnation in 1976. Used around the world across most platforms, the ability to drop into a computer, open a command prompt and type `vim` is a simple yet powerful concept.

In this course we will take a tour of Vim, and learn the essentials you need to know to start being productive with this powerful text editor. We will learn about basic movement through a file in Vim without a mouse, loading and saving files, commanding the Vim editor, and get started customizing Vim to suit your needs.

Learn to Use VIM

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

Create a List of Items with a React Native ListView

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! 

Intro to Vim

We'll use the interpolate function from an `Animated.Value` to transition the background color of an `Animated.View`. We'll simultaneously translate the position with the same `Animated.Value`.

Animate Colors with React Native Interpolate

By using the `interpolate` function, the  `Animated.View` can be rotated using both degrees and radians.

Animate Rotation with React Native Interpolate

In this lesson we'll learn to use `backfaceVisibility` style property and `rotateX` to create a vertical flip animation, and `rotateY` to create a horizontal flip animation.

Create a Flip Card Animation with React Native

In this lesson we'll use `Animated.parallel` to animate multiple `Animated.timing` and `Animated.spring` animations at the same time.

Animate Multiple Animations at the Same Time with Animated.parallel

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

Search

Search Results