Learn Elm, Jekyll and Nightmare

`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

Nightmare is a high-level browser automation library.

The goal is to expose just a few simple methods, and have an API that feels synchronous for each block of scripting, rather than deeply nested callbacks. It's designed for automating tasks across sites that don't have APIs.

nightmare

Many pages you'll want to grab data from will require you to log in first. This video demonstrates how to log in and grab whatever data off the page you will need.

Scraping Data from Sites with Login Forms with Nightmare

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

Many websites have more than just simple static content. Dynamic content which is rendered by JavaScript requires browser to be able to scrape data. This video demonstrates how to use Nightmare (which is a wrapper around Electron) to launch a url and scrape dynamic data.

Scraping Dynamic JavaScript Websites with Nightmare

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

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

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

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Install Jekyll and generate initial, scaffolded website

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.

Center an elm-ui Element Horizontally and Vertically

In this lesson we will start to get to know the row and column functions in elm-ui to help us layout our application. We will choose the mobile first approach in which we will display everything in one column, show how to handle two columns and explain that later when we do responsible we will be able to play a bit more with this. Since the concept of margin does not exist in elm-ui, in this lesson we learn how to solve it by using spacing and we will talk about padding in a future lesson.

Model a Layout with row, column and spacing with elm-ui

We will use the pink box element that we had from previous lessons while implementing our fancy dashboard and we will turn it into our Card "component", the piece of UI that we are going to repeat and that will have its own state later on the course. 

To do this, we'll first manipulate the background color and text color, then change the height and width of the card. We will want to change the title for each of the cards and to do so we will accept a title argument that will be passed down to our text element within the card to be displayed.

Use View Functions to Create Reusable Pieces of UI in Elm

We will style the heading of `viewCards` to look more like a real heading. If you inspect the console right now, you'll find that the `el` element we are using for our text corresponds to a div in HTML. 

We will go further away than using only text to display our content and introduce the modules `Element.Font` and `Element.Region` to fix the headlines and other text of our dashboard, adding an additional "breakdown" heading that is going to serve as a divider between sections.

Search

Search Results