Learn Elm, Flow and Tweenlite

`elm-ui` is a language for layout and interface design. This is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way.

The novel part is that it does not require you to know CSS to be used. The API is very simple and can be learned quickly!

The approach taken by `elm-ui` is based on two big ideas: 
Getting the compiler to verify as much of the layout and styling as possible by defining them in Elm code
Enabling refactoring capabilities of Elm for UI code


Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

Functions are an important building block in Elm. In this lesson we will review stateless functions, function composition, anonymous functions, Currying, and more.

Functions in Elm

Elm includes a data type called `Maybe` which is useful for working with values that may, or may not exist. This lesson shows a simple case where maybe types are encountered, and how to make them useful.

Using "Maybe" in Elm for values that may or may not exist

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with messages.

HTTP requests are just pieces of data in Elm. When we want to send them, we hand them off to Elm's runtime, and it notifies us when the request is done. An important part of working with HTTP requests that fetch JSON is JSON decoding, the process by which we can turn untyped JSON data into Elm types that are safe to work with.

Specs:

- Editor: Atom
- Theme: [Nebula (with Nebula syntax theme)](https://atom.io/themes/nebula-ui)
- Font: [Iosevka with ligatures enabled](https://github.com/be5invis/Iosevka)
- Plugin used for imports: [Elmjutsu](https://atom.io/packages/elmjutsu)
- Plugin used for formatting: [Elm-format](https://atom.io/packages/elm-format)
- Plugin used for linting: [linter-elm-make](https://atom.io/packages/linter-elm-make)


Make an HTTP Request in Elm

flow

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

Primitive Types in Flow

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

Up and Running with Facebook Flow for Typed JavaScript

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

AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.

3d Animations with Greensock TweenLite

Before writing any Elm we need to first install the runtime locally. In this lesson we install the Elm runtime locally and set up a simple application to verify everything is working properly.

Installing and setting up Elm

We are going to take a high-level look at what an Elm application looks like? We show how to structure apps, as well as, Elm’s elegant syntax by building a small app.

Elm in 7 minutes

Decoding JSON strings in Elm is a 2-step process:

1. Create a "recipe" for the decoding
2. Perform the decoding

This lesson gives a couple basic examples of the two steps in action.

Decode a List of Numbers From a JSON String in Elm

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

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how. 

Setup Nuclide to use Flow and Eslint (Mac)

List are an important collection in Elm. In this lesson we learn to create list as well as apply functions to filter, add, and transform them.

List in Elm

**Notice**:  This lesson uses Elm 0.17!

[Here's a document about the important differences between 0.16 and 0.17](https://github.com/elm-lang/elm-platform/blob/master/upgrade-docs/0.17.md).

This lesson gives a rapid-paced introduction to what's known as the Elm Application Architecture. You can read about it in greater detail here:

[guide.elm-lang.org](http://guide.elm-lang.org/architecture/index.html).

We'll build a counter that utilizes the standard Elm combination of a model, a view, and update function.

See the linked code for a good starting place.

Build a Tiny App Using the Standard Elm Architecture

This lesson will take you from nothing to a small Elm app that prints text to the browser.

Create your first web page with Elm

Records are important data structures in Elm. In this lesson we learn to create a record as well as describe the record by creating a type. We will also see how these new types can be used to clean up our annotations.

Records in Elm

In this lesson we will take a basic application, bootstrapped with [create-elm-app](https://github.com/halfzebra/create-elm-app), and begin converting the `div`s and `h1`s into `style-element`s.

Style elements separate our styles from the layout and positioning of elements. The `Element` module gives us everything we need for our view while the `Style` module will be the base for creating our stylesheet.

Render a Basic Element with style-elements in Elm

Turning JSON strings into types, also known as JSON Decoding is an important part of using Elm. It allows the programmer to use json-encoded data while staying completely aware of when the JSON might not match the programmer's expectations, all without throwing a run-time error! This lesson will show the viewer how to turn a simple JSON object into an analogous Elm record and use it to render some content to the screen.

Turn a JSON string Into Typed Data in Elm

In this lesson we are going to add types throughout our basic todo list component. This includes type checking the component props, local state, and property methods. 

Type Check React Components With Flow

In this lesson we are going to take a React and Redux application and add flow types throughout. This includes type checking a react component, a reducer, some actions, and a connect method. 

Type Check Redux Apps with Flow

We are going to go ahead and install globally create-elm-app (because it has the best DX so far) and show how would you typically start any production-ready Elm app, and also add elm-ui as a dependency and show the first elements with elm-ui.

Bootstrap an elm-ui Application with create-elm-app

To showcase the power of elm-ui, in this lesson we will show how incredibly easy it is to center an element both horizontally and vertically on a screen with elm-ui, since this is a typical problem while doing regular CSS.

Search

Search Results