• Stars
    star
    438
  • Rank 99,453 (Top 2 %)
  • Language
    Elm
  • License
    Other
  • Created over 8 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An introductory Elm workshop. Video available on Frontend Masters!

This work is licensed under a Creative Commons Attribution 4.0 International License. Enjoy!

Getting Started

Installation

  1. Install Node.js 6.9.2 or higher

  2. Add a plugin for your editor of choice: Atom, Sublime Text, VS Code, Light Table, Vim, Emacs, Brackets

  3. Not required, but highly recommended: enable "elm-format on save" in your editor.

  4. Run the following command to install everything else:

npm install -g elm elm-test elm-css [email protected] elm-format@exp

Note to macOS users: If step 4 gives you an EACCESS error, try this fix:

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

Then re-run step 4.

Clone this repository

Run this at the terminal:

git clone https://github.com/rtfeldman/elm-workshop.git
cd elm-workshop

Note: Tab characters are syntax errors in Elm code, so if your editor uses them for indentation, definitely switch it to spaces for this workshop!

Create a GitHub Personal Access Token

We'll be using GitHub's Search API, and authenticated API access lets us experiment without worrying about the default rate limit. Since we'll only be accessing the Search API, these steps can be done either on your personal GitHub account or on a throwaway account created for this workshop; either way will work just as well.

  1. Visit https://github.com/settings/tokens/new
  2. Enter "Elm Workshop" under "Token description" and leave everything else blank.
  3. Create the token and copy it into a new file called Auth.elm:

Auth.elm

module Auth exposing (token)


token =
    -- Your token should go here instead of this sample token:
    "abcdef1234567890abcdef1234567890abcdef12"

Note: Even for a token that has no permissions, good security habits are still important! Auth.elm is in .gitignore to avoid accidentally checking in an API secret, and you should delete this token when the workshop is over.

Verify Setup

Run this to install packages:

elm-package install --yes

Once that succeeds, run this to verify everything:

elm-live Main.elm --open --output=elm.js

A browser should open, and you should see this in it:

If things aren't working, the instructor will be happy to help!

Start with Part 1

Run this at the terminal:

cd part1

Now head over to the README for Part 1!

More Repositories

1

seamless-immutable

Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects.
JavaScript
5,363
star
2

elm-spa-example

A Single Page Application written in Elm
Elm
3,251
star
3

elm-css

Typed CSS in Elm.
Elm
1,239
star
4

dreamwriter

(NOTE! This has not been updated since Elm 0.15.1.) Streamlined long-form writing software. Written in Elm.
JavaScript
459
star
5

elm-0.19-workshop

Elm 0.19 workshops. Includes Intro and Advanced courses.
Elm
212
star
6

rust-1.51-workshop

Richard Feldman's Rust workshop
Rust
192
star
7

node-elm-compiler

A Node.js interface to the Elm compiler binaries.
TypeScript
170
star
8

elm-in-action

Resources for the Elm In Action book.
JavaScript
160
star
9

elm-validate

Convenience functions for validating Elm data.
Elm
144
star
10

node-test-runner

Runs elm-test suites from Node.js. Get it with npm install -g elm-test
JavaScript
133
star
11

elm-google-maps

Using Google Maps in Elm by way of Polymer
Elm
56
star
12

elm-use

Switch between Elm versions
JavaScript
38
star
13

elm-iso8601-date-strings

Convert between ISO-8601 date strings and Time.Posix
Elm
30
star
14

elm-web-workers

Write Elm code that talks to Web Workers.
Elm
28
star
15

selectlist

A nonempty list in which exactly one element is always selected.
Elm
27
star
16

elm-json-experiment

Experimental API for building JSON decoders
Elm
20
star
17

lambdaconf-2015-elm-workshop

Materials for the Elm Workshop at LambdaConf 2015
Elm
20
star
18

grunt-elm

Grunt plugin that compiles Elm files to JavaScript.
JavaScript
19
star
19

elm-codify

A tool to generate Elm decoders, encoders, and type aliases from JSON.
Elm
16
star
20

elm-0.18-workshop

An introductory Elm 0.18 workshop.
Elm
14
star
21

elm-node-app

Communication layer so Elm code can talk to Node.js code.
Elm
13
star
22

elm-css-helpers

Helpers for using elm-css with elm-html
Elm
11
star
23

dotfiles

Configuration files I use.
Shell
11
star
24

style-elements-demo

style-elements demo for ReactiveConf 2017 talk, "CSS as Bytecode"
Elm
8
star
25

elm-sorter-experiment

Experimental Sorter/Dict/Set API
Elm
8
star
26

elm-hex

Work with Hexadecimal numbers in Elm.
Elm
6
star
27

dreamwriter-coffee

Streamlined writing software. Written in React and CoffeeScript.
CoffeeScript
6
star
28

vector

List where head & tail don't return Maybe and still can't crash
Elm
6
star
29

count

Call record constructors with increasing integers. Surprisingly useful!
Elm
5
star
30

elm-signup-form

JavaScript
5
star
31

test-update

Convenience functions for testing update functions
Elm
5
star
32

mloc-2015-elm-workshop

Materials for the Elm Workshop at mloc.js 2015
Elm
5
star
33

hashed-class

Generate CSS classnames by hashing their styles.
Elm
5
star
34

hex

Work with Hexadecimal numbers in Elm.
Elm
4
star
35

roc-decimal-draft

Rust
3
star
36

quicksort-benchmarks

quicksort-benchmarks
Swift
3
star
37

csrf-xhr

Automatically add Rails CSRF tokens into XMLHttpRequest headers.
JavaScript
3
star
38

elm-in-action.com

Website for the book Elm in Action, from Manning Publications
3
star
39

console-print

Print special characters to the console, in Elm
Elm
3
star
40

ziplist

DEPRECATED in favor of rtfeldman/selectlist (better name!)
Elm
3
star
41

path

Elm
2
star
42

operation-pterodactyl

🦉
Elm
2
star
43

elm-css-util

Utility functions shared by elm-css and elm-css-helpers
Elm
2
star
44

elm-dropbox

Elm API for integrating with Dropbox
JavaScript
2
star
45

legacy-elm-test

An implementation of the legacy ElmTest module for backwards compatibility.
Elm
2
star
46

openresty-postgres-example

RealWorld example backend using OpenResty, Postgres, and nothing else
JavaScript
1
star
47

binstall

JavaScript
1
star
48

sweetvalidation

CoffeeScript
1
star
49

promises-done-polyfill

Polyfills Promise.done()
JavaScript
1
star