Learn Cycle, Mac and Serverless

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Bash makes automation easy. Just a few lines of code can take care of repetitive tasks for you and your teammates. 

In this course, we’ll dive deep into the automation potential of bash. You’ll learn to leverage common hooks that open up interesting automation possibilities, like git hooks, adding functions and aliases in your bash_profile, and running scheduled jobs in launchd.

For example, we’ll write a git hook that checks package.json for changes, and if there are changes, the hook runs npm install for you automatically. 

Along the way, you’ll also learn:

- more advanced bash commands like exec
- syntax such as redirecting stdout and stderr to the same destination
- timesaving tricks like brace expansions

Automation is all about saving you time — and at only 52 minutes, this course is well worth yours. Enjoy!

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Advanced Bash Automation for Web Developers

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: [joeprevite.com](https://joeprevite.com/)

Joe's Blog Posts as Screencasts

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Deploy a Serverless API React Application with TypeScript

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

Export Values from Components through Sinks in Cycle.js

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

Overview of Cycle.js

safari

Did you know every Mac comes with a fantastic screen reader built-in? Learn the basics for operating Voiceover with Safari, including common key commands, the web rotor, and the help menu. We'll also set up keyboard tabbing in Safari and OSX's System Preferences, two requirements for accessibility testing that occasionally trip up users. In a future lesson, we'll compare Voiceover to Windows screen readers, since they work quite differently.

#### Resources
- Apple Voiceover commands and gestures: https://www.apple.com/voiceover/info/guide/_1131.html
- WebAIM Voiceover Tutorial: http://webaim.org/articles/voiceover/

Using the Voiceover screen reader to test for accessibility

Let's see next how to use the HTTP driver to generate requests and capture responses. We will build a small app to fetch a single piece of data from a REST server and display that on the DOM.

Fetch Data using the Cycle.js HTTP Driver

Once we have a labeled slider component inside the main function, we should be able to create another labeled slider. This lesson teaches how to accomplish that, and make sure those two instances work independently of each other.

Use Multiple Independent Instances of a Cycle.js Component

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

Isolate Component Instances in Cycle.js

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

We need to give structure to our application with logic and effects. This lessons shows how we can organize our code into two parts: main() function for logic, and effects functions for effects.

Organize Code in the Main and Effect Functions

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect.

Customize Effects from the Main Function

What if we wanted to change the behavior of our app reset the timer every time the mouse *hovers* over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.

Fine-grained Control over the DOM Source in Cycle.js

Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.

Read Text Input in a Cycle.js Hello World Application

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

Use Hyperscript in Cycle.js as an Alternative to Template Languages

So far we have been writing very small apps in Cycle.js. Let's start growing the size of the apps we build. This time, we will see how to build a simple Body-Mass Index Calculator. We'll see how as our application grows there are three distinct sections: handling read effects, handling write effects, and handling internal state.



Manage Multiple Observable Streams in Cycle.js

We built the BMI calculator all inside one function: main(). As apps scale, we don't want main() to grow. We need an organized pattern where each function focuses on doing one thing. This lesson shows how we can easily refactor the main() function into three parts: Intent, Model, and View.

Organize your Cycle.js Application into the Model-View-Intent Pattern

We have made a Cycle.js app for generic labeled slider which can be configured through props, but how can we reuse it in other Cycle.js apps? This lesson shows how we can embed any Cycle program inside a larger Cycle program in a very simple manner.

Search

Search Results