Lisplog

ZAP Meme

Submitted by Bill St. Clair on Thu, 18 Apr 2019 05:25:32 GMT

https://zapmeme.com is a meme maker written in Elm.

It's open source, with a link at the bottom of the page. It uses <svg> to layout the meme, and converts to JPEG or PNG for saving.

It stores meme and images (as data:// URLs) in your browser's localStorage database. They may be exported as JSON and imported into another browser.

Add comment   Edit post   Add post

Image Sizing in elm-ui

Submitted by Bill St. Clair on Thu, 06 Dec 2018 03:53:36 GMT

I've been using Matthew Griffith's wonderful elm-ui package to make the user interface for GabDecker, a TweetDeck-like web app I'm building for Gab.com. I've had inline images since the beginning, scaled to fit the column width. Today I made clicking on one of those image open a dialog with the full-size version, scaled down if necessary to fit the available space.

elm-ui eschews CSS in the source code, usually making it much easier to get what you want. But in this case, I was NOT getting what I wanted, so I wrote my own CSS, and learned about the object-fit property in the process.

Here's the code that's now running:

imageDialog : String -> Model -> Element Msg
imageDialog url model =
    let
        maxw =
            9 * model.windowWidth // 10

        maxws =
            String.fromInt maxw ++ "px"

        maxh =
            9 * model.windowHeight // 10

        maxhs =
            String.fromInt (9 * model.windowHeight // 10) ++ "px"
    in
    column
        -- This is black magic.
        -- It took much play with the CSS to get it right.
        [ centerX
        , centerY
        ]
        [ standardButton "" CloseDialog <|
            (Html.img
                [ Attributes.style "object-fit" "contain"
                , Attributes.style "max-width" maxws
                , Attributes.style "max-height" maxhs
                , Attributes.style "border" "2px solid black"
                , Attributes.style "width" "auto"
                , Attributes.style "height" "auto"
                , Attributes.src url
                ]
                []
                |> Element.html
            )
        ]

Add comment   Edit post   Add post

How do I run elm-test in Elm 0.19?

Submitted by Bill St. Clair on Mon, 17 Sep 2018 00:24:33 GMT

This is a FAQ, so I'm making a blog post to answer it.

elm-test is still in beta for Elm 0.19. To install it:

$ npm install -g elm-test@beta

The tests directory no longer needs an elm-package.json file (nor does it need elm.json).

Your top-level elm.json file needs to include the following:

    "test-dependencies": {
        "elm-explorations/test": "1.0.0 <= v < 2.0.0"
    }

The easiest way to get it there is with elm-test itself. The following will create a tests directory, containing an example test file, Example.elm, and will add test-dependencies to elm.json.

$ elm-test init

That's it. There is not yet support for running elm-test in the browser, nor is there support for testing DOM output.

billstclair/elm-localstorage is configured with a tests directory to test its JSON encoders and decoders: github.com/billstclair/elm-localstorage. To run the tests:

$ git clone git@github.com:billstclair/elm-localstorage.git
$ cd elm-localstorage
$ elm-test

Add comment   Edit post   Add post

iPhone Xs Pricing

Submitted by Bill St. Clair on Wed, 12 Sep 2018 19:22:55 GMT

From the www.apple.com/iphone pages.

Watch the 12 September keynote.

Prices (in parentheses) are per month for Apple financing.

Model	64 gig	128 gig	256 gig	512 gig	Order	Ship
iPhone Xs:	$999 ($49.91)		$1149 ($56.16)	$1349 ($64.50)	9/14	9/21
Xs Max:	$1099 ($54.08)		$1249 ($60.33)	$1449 ($68.66)
Xr:	$749 ($37.41)	$799 ($39.50)	$899 ($43.66)		10/19	10/26
iOS 12:	Free					9/17
macOS Mojave	Free					9/24

Add comment   Edit post   Add post

Building the Elm compiler

Submitted by Bill St. Clair on Fri, 07 Sep 2018 07:01:51 GMT

I learned how to build the Elm version 0.19 compiler, in an effort to get it to provide full backtraces of a bug I was tickling. I failed at getting the full backtraces, but I succeeded in adding some debugging output. Anyway, here's how to do it.

First, you need to install Haskell on your machine. You need version 8.2.2 for the Elm 0.19 compiler. www.haskell.org/platform/prior.html

Then do the following:

$ git clone git@github.com:elm/compiler.git
$ cd compiler
$ cabal sandbox init
$ cabal install

The Elm executable will be in .cabal-sandbox/bin/elm.

The first build takes a while, as it needs to download and build all the dependenies. After that, it gets faster. cabal sandbox delete lets you start over.

After making changes to the source, run cabal install again, and it will compile only the changed files and files that depend on them.

---

To build the entire Haskell stack, with stack backtraces enabled, from @mfeineis on the Elm Slack channel (I haven't tried this):

Init with stack:

$ stack init --resolver lts-11.20

Add options in elm.cabal:

Executable elm
    if flag(dev)
        ghc-options: -O0 -Wall -Werror -rtsopts -eventlog

Build with stack:

$ stack build --flag elm:dev --profile

Run with RTS options:

$ elm make ./src/Main.elm \
   --output=./dist/app.js +RTS -xc -lu -RTC \
   2>eventlog_readable.log

Add comment   Edit post   Add post