Blogging in Lisp


Feed Aggregator

Rendered on Tue, 29 Dec 2020 15:34:02 GMT  newer latest older 
Next udpate: Tue, 29 Dec 2020 16:00:00 GMT feeds

How can I send large arrays through ports?

via Elm - Latest posts by @Warry Maxime on Tue, 29 Dec 2020 14:24:54 GMT

right, I forgot that this changed. my use case dated from the 0.17 era o som’thin’. my bad !

How can I send large arrays through ports?

via Elm - Latest posts by @rupert Rupert Smith on Tue, 29 Dec 2020 12:03:29 GMT

It may also be worth pointing out that an Elm Array is not implemented as a plain JS Array.

An Elm Array is a functional data structure which is immutable. To avoid copying the entire array on every Array.set, it is actually structured as a tree (with a high branching factor). This means that updates to the array can alter just one branch of the tree, but much of the tree can share the same memory as the original.

So when you pass a JS array into a port and decode it as an Elm array, it won’t simply pass through unchanged. The JS array will be restructured into an Elm array.

Just thought you might like to know in case you were thinking that using an array would carry zero performance cost.

Say hello to Elm Designer 0.1—A Elm UI code generator

via Elm - Latest posts by @eimfach Robin G. on Tue, 29 Dec 2020 10:39:32 GMT

Holy moly, nice work for sure ! Can‘t wait for more updates :slight_smile:

How to write fuzz tests for a function which generates a dictionary?

via Elm - Latest posts by @mgold on Tue, 29 Dec 2020 05:44:03 GMT

Let’s take a step back. Why do you want to fuzz test this function? Unit testing is one of those things that you can find a lot of opinions about on the internet. But as long as you are satisfied that your code is correct, then you are testing well. So maybe start with, what’s the bug surface, what bugs do you want to show are not present in your code?

I’m worried about many repeated words. Perhaps something like this: (I have not compiled these tests; some small tweaks may be necessary)

fuzz (Fuzz.intRange 0 1000) "counts repeated words" <| \i ->
  List.repeat i "barnacles" |> Main.wordsDict |> Expect.equal [Dict.fromList [("barnacles", i)]]

This should give you confidence that you can count large numbers of repetitions, BUT only when there are no other words present and and the word is "barnacles". You could also map over List.range 0 10 and make unit tests for those cases, instead of the fuzz test.

I’m worried about certain strings being treated specially. I’m usually not, if I can look at the code and see that it’s not looking at lengths, prefixes, a word list, etc., and doing nefarious things in those cases. You could write a fuzz test that takes in random strings, or a randoms string to use instead of "barnacles".

But if I’m making a data structure that treats strings generically then… you can use the type system. Why not make the signature wordsDict : List comparable -> List (Dict comparable Int)? By making the function more generic, the compiler will reject any attempts to say, not count the empty string. (Unless that’s desired behavior, in which case, write a unit test.)

I’m worried about counting up all the words. One of the great things about fuzz tests is that you don’t have to compute the output value of the function under test, only some invariant that will be true about it. Let’s test that the length of the input list will equal the sum of the values of the dictionary.

-- use a small word list to ensure duplicates
myWords = ["barnacles", "turtles", "whales", "sharks"]

-- effective Elm programming involves combining simple functions together
listFrom : List a -> Fuzz.Fuzzer (List a)
listFrom words = words |> Fuzz.constant |> Fuzz.oneOf |> Fuzz.list

fuzz (listFrom myWords) "length of input = sum of values of output" <| \input ->
  input |> Main.wordsDict |> Dict.values |> List.sum |> Expect.equal (List.length input)

You can write a similar test to check that all values are positive.

How can I send large arrays through ports?

via Elm - Latest posts by @noise-machines Thomas Bailey on Tue, 29 Dec 2020 00:19:22 GMT

Hi everyone!

Thanks for your help – I’ve got it working now.

I had a Debug.log first thing in my main function that wasn’t getting printed before the error happened, so I assumed the problem was as the array crossed the border into Elm. But after reducing my Elm code down, it looks like the actual issue was somewhere else.

Also, good to know that there’s a difference between Arrays and Lists! I think Arrays are better for my use case since I need random access.

Thanks again!

Custom path for elm tests fails

via Elm - Latest posts by @system system on Mon, 28 Dec 2020 23:58:49 GMT

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

Test-only values

via Elm - Latest posts by @opvasger Asger Nielsen on Mon, 28 Dec 2020 23:49:10 GMT

I’ve worked around this situation once or twice before - I used this strategy, based on your example:

module Role exposing (Role, adminToBool, userToBool)

type Role = Admin | User

adminToBool: (Role -> Bool) -> Bool

userToBool : (Role -> Bool) -> Bool

Say hello to Elm Designer 0.1—A Elm UI code generator

via Elm - Latest posts by @gampleman Jakub Hampl on Mon, 28 Dec 2020 19:48:19 GMT

Very cool and I’m very happy you decided to take this on. I literally started working on something similar about a year back, but then realised I didn’t have time to actually work on it.

It looks really nice. I’m hoping there will be some abstraction features in the future.

Feedback on Animation Utils

via Elm - Latest posts by @supermario Mario Rogic on Mon, 28 Dec 2020 17:35:28 GMT

This looks really cool @andrewMacmurray! Love the elm-ui helpers. Planning to try it out on some looping animations with elm-ui this week!

Say hello to Elm Designer 0.1—A Elm UI code generator

via Elm - Latest posts by @passiomatic Andrea Peltrin on Mon, 28 Dec 2020 17:03:31 GMT

After a lot of work I’m excited to introduce you the first release of Elm Designer, a Elm UI code generator.

Elm Designer lets you build visually your page design and generates the necessary Elm UI code for you: simply drag and drop elements from the library in the document tree and style theme accordingly to your needs. You can them copy code from the Code tab.

I believe it is a great way to approach Elm UI, do some experiments or automate the creation of boring code.


Elm Designer is distributed as an Electron app. Right now there’s a macOS binary available to download and you can run Elm Designer sources on Windows and Linux systems via CLI. Please take a look at the repo README for more information.

Version 0.1 goals

Given that it is a 0.1 version there’s a lot work yet to be done, however it is already usable. Right now Elm Designer can:

  • Create and transform simple designs into Elm code
  • Auto-save designs into browser localStorage
  • Cover Elm UI row , column , textColumn layout primitives and most of the form widgets; support padding and spacing; allow fonts formatting with native and external web fonts (thanks to Google Fonts)

Sensible defaults

I’ve integrated several Google Fonts in the app (more are coming!) and gave some reasonable appearance to headings, form fields and other Elm UI elements to make you start quickly.

Thank you

Elm Designer would not exist without these great packages:

  • mdgriffith/elm-ui - Ca va sans dire!
  • miniBill/elm-codec - JSON document encoding and decoding
  • norpan/elm-html5-drag-drop - Drag & drop operations between elements library and document tree
  • zwilias/elm-rosetree - Tree/Zipper types to represent and manipulate the document tree
  • TSFoster/elm-uuid - Gives each node in the document an unique ID
  • the-sett/elm-syntax-dsl - Elm code generation

Finally, a special thank you to all the fine folks on the Elm slack channel who helped me during the last months.

Problem snapping SVG to grid

via Elm - Latest posts by @AlienKevin Kevin Li on Mon, 28 Dec 2020 15:44:50 GMT


I’m making an SVG font editor where you can drag and drop components to create compound characters. The position and dimension of the component grows/shrinks in the unit size of the grid, but the rendered component doesn’t snap to grid.

Steps to reproduce

  1. Go to the live web app
  2. Click on the “+” button next to “Compound Characters”
  3. Enter an arbitrary letter “c”
  4. Press enter to create a compound character
  5. Drag any characters under “Simple Characters” to the grid editor on the right
  6. In the grid editor, drag the component around. You can see that it is not snapped to grid


Model stores a dictionary of characters of MyChar type. There are two kinds of characters - SimpleChar and CompoundChar. They both contains MyCharRef which stores mainly the dimension (width & height) and position (x & y) of the character. The unit of measurement is percentage so the character can be scaled relative to its parent CompoundChar or the root SVG. A SimpleChar is basically an alias for MyCharRef and a CompoundChar contains a list of MyCharRef as its components in addition to its own information stored in a separate MyCharRef.

type MyChar
    = SimpleChar MyCharRef
    | CompoundChar MyCharRef (List MyCharRef)

type alias MyCharRef =
    { char : Char
    , id : Id
    , dimension : Vec2
    , position : Vec2

The characters are rendered in a square grid of size boxUnits and has a border of width borderUnits round it. The actual size in px of a unit is stored in unitSize.

renderChar renders the character
onDragBy updates the position and dimension of components

My guesses

  • Maybe I messed up the position calculation in the renderChar function?
  • Maybe due to limited accuracy of the percentage unit in svg?

How can I send large arrays through ports?

via Elm - Latest posts by @noise-machines Thomas Bailey on Mon, 28 Dec 2020 14:04:34 GMT

Hi everyone! Thanks for the suggestions. Sounds like there should be a way to do this. I’ll try out some of your suggestions and report back with a small, self-contained example if I still can’t get it to work. Thanks for the help!

How can I send large arrays through ports?

via Elm - Latest posts by @rupert Rupert Smith on Mon, 28 Dec 2020 11:23:20 GMT

Worth noting that you cannot pass Bytes through a port.

How can I send large arrays through ports?

via Elm - Latest posts by @Warry Maxime on Mon, 28 Dec 2020 10:37:33 GMT


Elm ports will check the type of every item in your list if you specify the type, and convert js arrays to linked list if you declare a List (whereas Elm Array are plain js arrays). The trick might be to declare your data as Json Value, an Array of Json Values or even using Bytes, then you can arrange the parsing so that it’s suiting your needs. Not an easy task, but that’s what I ended up doing that one time I had to face the same problem.

 newer latest older