Some helpful examples and fixes

Author: badlydrawnrob

how-to-elm/README.md

@@ -10,11 +10,18 @@ These can be a blessing and a curse, as some things might be better with a dedic
 
 ## Rules
 
-> I need to start setting rules for myself
+> I need to start setting rules for myself ...
+> How do I keep my programs simple? What's in? What's out?
 
 1. What format am I using? (custom headings or `elm-format`)
 2. What indentation style am I preferring? (`2` or `4` spaces)
 3. What learning is "in" and what is "out"?[^1]
 
 
+## Improvements
+
+1. When using `port`s, it can be handy to have a cursory knowledge of javascript.
+    - In general I use as little javascript as possible. Set it and forget it.
+
+
 [^1]: I'm using Elm as my go-to language and for that reason learning the details in a little more depth than, say, Python. However, my purpose is prototyping and I still want to keep my learning light. Some implementations (SPA, packages) get complicated quite quickly as an app scales.

how-to-elm/src/Form/Email.elm

@@ -0,0 +1,37 @@
+module Form.Email exposing (validateEmail)
+
+{-| ----------------------------------------------------------------------------
+    Email (with Regex)
+    ============================================================================
+    Some helpful links:
+        @ http://html-to-elm.com
+        @ hecrj/html-parser (package)
+        @ elm-explorations/markdown (Github)
+        @ pablohirafuji/elm-markdown (package)
+
+    Wishlist
+    --------
+    1. Add some color (red or green)
+    2. Present user with error message ("username or password incorrect")
+        - Be careful of oversharing which risks a brute force hack!
+        - @ https://ux.stackexchange.com/questions/111830
+    3. Add log files? (backend, probably)
+-}
+
+import Regex
+
+
+type alias Email
+    = Maybe String
+
+validateEmail : String -> Email
+validateEmail userinput =
+    let
+        pattern = Regex.regex "\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}\\b"
+        isEmailStr = Regex.contains pattern userinput
+
+    in
+        if isEmailStr then
+            Email userInput
+        else
+            Nothing

how-to-elm/src/Form/Simple.elm

@@ -1,13 +1,5 @@
 module Form.Simple exposing (..)
 
-import Browser
-import Html exposing (..)
-import Html.Attributes exposing (..)
-import Html.Events exposing (onInput)
-import String exposing (any)
-import Char exposing (isDigit, isLower, isUpper)
-import Debug exposing (log)
-
 {-| A simple form
 
     Always start with the `Model` — what shape will our data take?
@@ -36,6 +28,14 @@ import Debug exposing (log)
     deciding you need something more complex!
 -}
 
+import Browser
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (onInput)
+import String exposing (any)
+import Char exposing (isDigit, isLower, isUpper)
+import Debug exposing (log)
+
 
 -- Main ------------------------------------------------------------------------
 

how-to-elm/src/Ports/SimpleLogout.elm

@@ -0,0 +1,56 @@
+module Ports.SimpleLogout exposing (..)
+
+{-| ----------------------------------------------------------------------------
+    From the example in Slack
+    ============================================================================
+    Here we have everything contained in the one file, unlike our `LocalStorage.elm`
+    example. We start with a flag that may be `Nothing` and we've got two functions
+    that set login/logout. Unlike `LocalStorage.elm`, our update function is simple
+    and doesn't attempt to `Cmd.batch` our commands. It's one `Cmd` to login, and
+    one to logout.
+
+    Pushing our changes The JS side would look like:
+
+    ```js
+    const localStorageAuthKey = "my-app-auth";
+    const auth = localStorage.getItem(localStorageAuthKey);
+    const app = Elm.Main.init(someNode, {auth});
+
+    app.ports.persistLogin.subscribe((auth) => localStorage.setItem(localStorageAuthKey,auth));
+    app.ports.persistLogout.subscribe(() => localStorage.removeItem(localStorageAuthKey));
+    ```
+
+    You might also like to check if the function exists as Ryan Haskell suggests.
+    If it doesn't exist, you can use a default value or do nothing ...
+    @ https://www.youtube.com/watch?v=YfS5BJ4IXcQ
+
+    ```js
+    if (app.ports?.persistLogin?.subscribe) {
+      app.ports.persistLogin.subscribe((auth) => localStorage.setItem
+    }
+    ```
+-}
+
+port persistLogin : String -> Cmd msg
+port persistLogout : () -> Cmd msg
+
+type alias Flags =
+  { auth : Maybe String }
+
+type alias Model =
+  { auth : Maybe String }
+
+type Msg
+  = LogIn String
+  | LogOut
+
+init : Flags -> (Model, Cmd Msg)
+init flags =
+  ( { auth = flags.auth }
+  , Cmd.none
+  )
+
+update msg model =
+  case msg of
+    LogIn auth -> ({ model | auth = Just auth }, persistLogin auth)
+    LogOut     -> ({ model | auth = Nothing },   persistLogout ())

programming-elm/src/DevDebugDeploy/Debugging.elm

@@ -19,7 +19,6 @@ module DevDebugDeploy.Debugging exposing (..)
 import Html exposing (Html, text)
 import Json.Decode as Json
 import Json.Decode.Pipeline exposing (required)
-import WebSockets.RealTime exposing (Msg)
 
 
 -- Model -----------------------------------------------------------------------