I was quickly writing a prototype for an idea about resizing and framing images. I started writing in Javascript, that is still the faster way for me to see something working. Then I decided to write the same exact thing in Elm, that I am learning now, to appreciate the different experience.
I have to say that both codes are badly written code, so please don’t take them as inspiration.
I start appreciating the simplicity of writing stuff in Elm. The main difference in this case has been that the code written in elm can be easily refactored, also in small steps. Javascript code, instead, can only be thrown away and rewritten from scratch.
This is the idea behind this small project: We have several blocks in a page where same images are showed differently depending on subjective aesthetic judgments made by our designers. To avoid having the designers to prepare many different variants of each page, I want to give them a tool that they can use, on each image, that would allow them to position the same image in all blocks. So, less work for designer. Another benefit of this approach is that there is only one images for each subject and it can be easily cached. After the images is positioned, the tool would return a file name that can be used to rename the image. The parameters in the name can then be used in the page to adjusts its position and size, after being parsed by Javascript.
These are the two versions of the end result:
