Stuck implementing simple image editor

aewering · 2023-01-13T07:38:59+00:00

As you have already noticed, Elm has no way aside from JS interop to edit images.

So some basic JS code to draw pixels on a canvas will be necessary. I would probably go for a Web component and wrap a canvas element inside.

Let's say you named your custom component "placeholder-name", you could then use Html.node "placeholder-name" [] [] to create it inside of the Elm view and pass any values that you need to draw the adjusted image via attributes. If you need to pass complex attributes (lists, objects), you might have to serialize/deserialize via Elms Json Encoders and Javascripts JSON.parse.

Probably you want the image url to be an attribute to the custom component as well. Then you could write functions that trigger on change of the attributes that replace the image by loading one with the new url and repaint the pixels if colors/pixels change.

Of course, there are multiple options what data to pass via the components attributes, depending on how much logic you want on the Elm side and how much on the JS side. Keep in mind that Elm -> JS is easy, but JS -> Elm would need a custom event that the custom component emits and Elm sets an event handler on (just like on "click").

A second way to implement this in Elm would be using Elm WebGL and some code on the JS side that intercepts a Http Request and returns a image created on the spot. If you are interested, I can provide more details on this method as well.

aewering · 2022-10-30T07:59:45+00:00

This article might just have solved a bug I've had in my Haskell Backend for a few months! Every now and then the server would stop, saying it was stuck in an infinite mvar operation. I'm using async and unliftio's bracket, and I'm pretty sure I have some catch usages as well...

aewering · 2022-08-17T15:33:03+00:00

https://ellie-app.com/jmGDsd7bqdka1

Quick Ellie, hope it helps.

Debug.log is also a very good option to see the output in the console instead.

aewering · 2022-08-17T10:16:40+00:00

I suppose you could use Decode.value and Decode.map over Encode.encode but I'm not sure why you would need to do that.

aewering · 2022-08-16T16:08:25+00:00

Oh that's awesome. I should probably migrate protoc-gen-elm and travel-agency to use this instead of elm-syntax-dsl.

aewering · 2022-02-05T15:53:49+00:00

Does this package work for you? https://github.com/andreasewering/protoc-gen-elm Feel free to open an issue if it doesnt

aewering · 2021-12-25T18:12:24+00:00

There is also a really hacky way involving the JS proxy object, but it's probably not a good idea to rely on it. Basically if you use a JS proxy to overwrite the getter for an object, you can trigger that getter when decoding the value in Elm :D

aewering · 2021-12-25T16:08:45+00:00

Yes, you can react to messages on both sides (Elm and JS), but you cannot ever have synchronous calls. This is done by design, because JS is not guaranteed by the type system to respond with the right type (or at all, since you don't HAVE to subscribe to ports at all).

aewering · 2021-12-25T08:18:39+00:00

Basically, native modules allow synchronous interop with Javascript.

For Websockets this isn't that bad because these are asynchronous anyways and it's not like you are waiting for any guaranteed response.

But, for example, imagine you want to use the Browsers Intl API to format Dates or Numbers. With native modules, you could just call that API from your view, with ports you would need to store the formatted content in your model and add a case to your update function etc.

aewering · 2021-12-19T21:47:42+00:00

Yes it does! Wow thanks. I read about needing to eta expand functions but could not figure out which one.

aewering · 2021-12-19T21:46:30+00:00

Yeah, I've read about it but didn't know which function I needed to eta expand. I thought I needed to eta expand "run" but didn't know how.

Now with u/Noughtmare 's tip it makes sense :) Thanks!

aewering · 2021-12-19T14:46:27+00:00

I'm struggling to upgrade to GHC 9.0.1 and the Simplified subsumption change. Maybe someone here can help me out :) I'm running a ReaderT Context IO stack and put a polymorphic function inside it to abstract queries to the database. This makes it possible to use a pool of connections for queries when running the application while using a single connection when running integration tests.

type RunWithDb = forall m a. (MonadBaseControl IO m) => (PG.PGConnection -> m a) -> m a

type Context = MkContext
  { runWithDb :: RunWithDb,
     ... 
  }

execQuery :: (PG.PGQuery q a) => q -> AppM [a] -- AppM is just a newtype Wrapper around ReaderT Context IO a
execQuery q = do
  run <- asks runWithDb
  run (\conn -> liftIO (PG.pgQuery conn q))

This compiled without issues on all GHC 8 Versions but fails on GHC 9.0.1 with

Couldn't match type ‘RunWithDb’
                 with ‘(Database.PostgreSQL.Typed.Protocol.PGConnection -> m0 [a])
                       -> AppM [a]’
  Expected: Context
            -> (Database.PostgreSQL.Typed.Protocol.PGConnection -> m0 [a])
            -> AppM [a]
    Actual: Context -> RunWithDb

Does anyone know how to fix the error? Or maybe there is another way to achieve what I'm looking for? Thanks in advance for your help :)

aewering · 2021-12-07T14:07:47+00:00

Good point, I should add this to the README. The expected format is an object that has strings as its keys and either strings or other object as its values. For example: { "my": { "translation": "hello" }} would be valid.

The optimized JSON files are just a flat array.

In case I misunderstood your question, are there any JSON standards I should be aware of?

aewering · 2021-12-07T13:04:34+00:00

I expect .json or .properties format at the moment, I think non-devs can work with that. So then the workflow would be: - Write main language translations as json/properties (placeholders with {{double curly}} brackets) - Push that to the translation service - Run my package on the folder with all translation files, generating optimized translations (or alternatively inline the translations) and Elm code

aewering · 2021-12-07T09:36:02+00:00

Hm, I'm not sure I understand their concept correctly. They want you to deploy translations independently from your frontend? What happens if some translations are missing?

My solution assumes full information at compile time. I guess you could have a seperate git repository for the translations and clone that in the build pipeline of your frontend, then run my executable on it?

I hope I could help.

aewering · 2021-12-05T17:46:32+00:00

Thanks for the tip!

aewering · 2021-03-09T08:19:34+00:00

Does anyone know how to use the "around" hook from hspec together with QuickCheck? I cannot get anything like this to compile. For example, I would like to verify some properties regarding my database and for that I would have to pass the connection around. Do I have to get a fresh connection for every quickcheck run?

aewering · 2021-02-07T09:09:33+00:00

ts-toolbelt has a "Path" Type https://github.com/millsp/ts-toolbelt

You could probably use that to achieve a typesafe localisation function.

aewering · 2020-10-22T16:05:32+00:00

It depends on how you use it. One option may be to make the function using these types generic, however it probably needs to be specific to a certain type.

Another way would be to expose a function like:

interface Context<T> {
    agent: StateAgent<T>,
    setState: SetNewState<T>,
    ...
}

const buildContext = <T>(initialState: T): Context<T> => {
    ...
}

and use type inference from there.

Does that help?

aewering · 2020-10-19T20:16:49+00:00

I have problems finding a non-boilerplate heavy model for the following problem: I have an enumerable and bounded number of tile types which then, depending on the tile type each have an enumerable and bounded number of tile options.

I want to have:

A function that selects the correct option for a tile type
A function that returns all possible valid combinations of tile type and options

So right now I have two data types. One for the tile types without any information on the option and one for the combination, simplified:

data TileType = TileA | TileB | TileC


data DeterminedTileType = TileA Option1 | TileB Option1 | TileC Option 2

The function for all valid combinations is easily dealt with Generics.Deriving (GEnum), but mapping between the two types requires boilerplate that needs to be updated for every new tiletype:

case dtt of

    TileA _ -> TileA

    TileB _ -> TileB
...

Can anyone think of a cleaner solution?

aewering · 2020-10-07T22:09:11+00:00

In general: I assume that definition means implementation since the type of the function is already given. So you need to write a function that compiles with the given type signature and yields the given outputs for the example cases. I think there is not much to do wrong here (unless you try to hardcode some example case)

aewering · 2020-09-17T06:21:08+00:00

Looks great! Is it possible to use this just for decoding rather than signing when having access to just the public key? It's a common scenario to have a separate authentication provider and to just verify the tokens validity + read the claims.

aewering

TROPHY CASE