Distinguish frameworks added before and after the blog post

.gitignore

@@ -1,2 +1,4 @@
 elm-stuff
-node_modules
+node_modules
+picker.js
+package-lock.json

index.html

@@ -25,32 +25,35 @@ <h3>Methodology Notes</h3>
     </p>
     <p>Check out <a href="http://elm-lang.org/blog/blazing-fast-html-round-two">this blog post</a> for more information on the methodology we used to make these comparisons as fair as possible.
     </p>
+    <h4>Note</h4>
+    <p>Some frameworks or versions listed to the right have been added subsequent to the blog post being posted, allowing future implementations to be compared with newer versions of Elm.</p>
   </div>
 
   <script type="text/javascript">
-    function impl(name, version, optimized, url)
+    function impl(name, version, optimized, url, afterBlogPost)
     {
       return {
         name: name,
         version: version,
         optimized: optimized,
-        url: 'implementations/' + url
+        url: 'implementations/' + url,
+        afterBlogPost: afterBlogPost
       };
     }
 
     var div = document.getElementById('sidebar');
     var picker = Elm.Picker.embed(div, [
-      impl('Ember', '2.6.3', false, 'ember-2.6.3/dist/index.html'),
-      impl('React', '15.3.1', false, 'react-15.3.1/index.html'),
-      impl('Angular', '1.5.8', false, 'angular-1.5.8/index.html'),
-      impl('Angular', '2', false, 'angular-2/index.html'),
-      impl('Elm', '0.16', false, 'elm-0.16/index.html'),
-      impl('Elm', '0.17', false, 'elm-0.17/index.html'),
-      impl('React', '15.3.1', true, 'react-15.3.1-optimized/index.html'),
-      impl('Angular', '1.5.8', true, 'angular-1.5.8-optimized/index.html'),
-      impl('Angular', '2', true, 'angular-2-optimized/index.html'),
-      impl('Elm', '0.16', true, 'elm-0.16-optimized/index.html'),
-      impl('Elm', '0.17', true, 'elm-0.17-optimized/index.html')
+      impl('Ember', '2.6.3', false, 'ember-2.6.3/dist/index.html', false),
+      impl('React', '15.3.1', false, 'react-15.3.1/index.html', false),
+      impl('Angular', '1.5.8', false, 'angular-1.5.8/index.html', false),
+      impl('Angular', '2', false, 'angular-2/index.html', false),
+      impl('Elm', '0.16', false, 'elm-0.16/index.html', false),
+      impl('Elm', '0.17', false, 'elm-0.17/index.html', false),
+      impl('React', '15.3.1', true, 'react-15.3.1-optimized/index.html', false),
+      impl('Angular', '1.5.8', true, 'angular-1.5.8-optimized/index.html', false),
+      impl('Angular', '2', true, 'angular-2-optimized/index.html', false),
+      impl('Elm', '0.16', true, 'elm-0.16-optimized/index.html', false),
+      impl('Elm', '0.17', true, 'elm-0.17-optimized/index.html', false)
     ]);
 
     picker.ports.start.subscribe(function(impls) {

readme.md

@@ -69,7 +69,9 @@ If you want to fork this repo and try things out, the easiest way is probably to
 
 ```bash
 cd src
-elm-make Picker.elm --output=picker.js
+npm install
+# Uses Elm 0.18 instead of global package:
+npm run make
 ```
 
 And then navigate into `implementations/*/readme.md` and follow the build instructions for the various projects.

src/Picker.elm

@@ -6,95 +6,97 @@ import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 
 
-
 main =
-  App.programWithFlags
-    { init = init
-    , view = view
-    , update = update
-    , subscriptions = subscriptions
-    }
+    App.programWithFlags
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = subscriptions
+        }
 
 
 
 -- MODEL
 
 
 type alias Model =
-  { running : Bool
-  , entries : List Entry
-  }
+    { running : Bool
+    , entries : List Entry
+    }
 
 
 type alias Entry =
-  { selected : Bool
-  , id : Int
-  , impl : Impl
-  }
+    { selected : Bool
+    , id : Int
+    , impl : Impl
+    }
 
 
 type alias Impl =
-  { name : String
-  , version : String
-  , url : String
-  , optimized : Bool
-  }
+    { name : String
+    , version : String
+    , url : String
+    , optimized : Bool
+    , afterBlogPost : Bool
+    }
 
 
 init : List Impl -> ( Model, Cmd msg )
 init impls =
-  { running = False
-  , entries = List.indexedMap (Entry False) impls
-  }
-    ! []
+    { running = False
+    , entries = List.indexedMap (Entry False) impls
+    }
+        ! []
 
 
 
 -- UPDATE
 
 
 type Msg
-  = Toggle Int
-  | Start
-  | End
+    = Toggle Int
+    | Start
+    | End
 
 
 update : Msg -> Model -> ( Model, Cmd msg )
 update msg model =
-  case msg of
-    Toggle id ->
-      { model | entries = toggle id model.entries }
-        ! []
+    case msg of
+        Toggle id ->
+            { model | entries = toggle id model.entries }
+                ! []
 
-    Start ->
-      { model | running = True }
-        ! [ startSelected model.entries ]
+        Start ->
+            { model | running = True }
+                ! [ startSelected model.entries ]
 
-    End ->
-      { model | running = False }
-        ! []
+        End ->
+            { model | running = False }
+                ! []
 
 
 toggle : Int -> List Entry -> List Entry
 toggle id entries =
-  case entries of
-    [] ->
-      []
+    case entries of
+        [] ->
+            []
 
-    entry :: rest ->
-      if entry.id == id then
-        { entry | selected = not entry.selected } :: rest
-
-      else
-        entry :: toggle id rest
+        entry :: rest ->
+            if entry.id == id then
+                { entry | selected = not entry.selected } :: rest
+            else
+                entry :: toggle id rest
 
 
 port start : List Impl -> Cmd msg
 
 
 startSelected : List Entry -> Cmd msg
 startSelected entries =
-  start (List.map .impl (List.filter .selected entries))
+    entries
+        |> List.filter .selected
+        |> List.map .impl
+        |> start
 
 
 
@@ -106,7 +108,7 @@ port end : (() -> msg) -> Sub msg
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
-  end (always End)
+    end (always End)
 
 
 
@@ -115,33 +117,86 @@ subscriptions model =
 
 view : Model -> Html Msg
 view { running, entries } =
-  div []
-    [ ul
-        (if running then [ style [("color", "#aaa")] ] else [])
-        (List.map (viewEntry running) entries)
-    , button
-        [ style [("width","100%")]
-        , disabled running
-        , onClick Start
-        ]
-        [ text "Run" ]
-    ]
+    div [] <|
+        (viewEarlyEntries running entries)
+            ++ (viewLaterEntries running entries)
+            ++ [ button
+                    [ style [ ( "width", "100%" ) ]
+                    , disabled running
+                    , onClick Start
+                    ]
+                    [ text "Run" ]
+               ]
+
+
+viewEarlyEntries : Bool -> List Entry -> List (Html Msg)
+viewEarlyEntries running entries =
+    let
+        earlyEntries =
+            entries |> List.filter (\entry -> not entry.impl.afterBlogPost)
+
+        laterEntries =
+            entries |> List.filter (\entry -> entry.impl.afterBlogPost)
+    in
+        (if List.isEmpty laterEntries then
+            []
+         else
+            [ h2 [] [ text "Before Blog Post" ] ]
+        )
+            ++ [ ul
+                    (if running then
+                        [ style [ ( "color", "#aaa" ) ] ]
+                     else
+                        []
+                    )
+                    (List.map (viewEntry running) earlyEntries)
+               ]
+
+
+viewLaterEntries : Bool -> List Entry -> List (Html Msg)
+viewLaterEntries running entries =
+    let
+        laterEntries =
+            entries |> List.filter (\entry -> entry.impl.afterBlogPost)
+    in
+        if List.isEmpty laterEntries then
+            []
+        else
+            [ hr [] []
+            , h2 [] [ text "After Blog Post" ]
+            , ul
+                (if running then
+                    [ style [ ( "color", "#aaa" ) ] ]
+                 else
+                    []
+                )
+                (List.map (viewEntry running) laterEntries)
+            ]
 
 
 viewEntry : Bool -> Entry -> Html Msg
 viewEntry running { id, selected, impl } =
-  li
-    (if running then [ pointer ] else [ pointer, onClick (Toggle id) ])
-    [ input [ type' "checkbox", checked selected, disabled running ] []
-    , text (" " ++ impl.name ++ " " ++ impl.version)
-    , span
-        [ style [("color","#aaa")]
-        ]
-        [ text (if impl.optimized then " (optimized)" else "")
+    li
+        (if running then
+            [ pointer ]
+         else
+            [ pointer, onClick (Toggle id) ]
+        )
+        [ input [ type' "checkbox", checked selected, disabled running ] []
+        , text (" " ++ impl.name ++ " " ++ impl.version)
+        , span
+            [ style [ ( "color", "#aaa" ) ]
+            ]
+            [ text
+                (if impl.optimized then
+                    " (optimized)"
+                 else
+                    ""
+                )
+            ]
         ]
-    ]
 
 
 pointer : Attribute msg
 pointer =
-  style [ ("cursor", "pointer") ]
+    style [ ( "cursor", "pointer" ) ]

src/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "src",
+  "version": "1.0.0",
+  "description": "",
+  "main": "add-complete-delete-batched.js",
+  "scripts": {
+    "make": "npx elm make Picker.elm --output=picker.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "elm": "^0.17.1"
+  }
+}