The use of Elm combined with Style-elements allow us to be creative with media queries. This app, a simple html page editor, can generate a mobile preview that is quite accurate without using iframes or browser tools.
CSS media queries can only react to the viewport size but if our media query are in the code, we have the flexibility to have them reacting to any type of parameter.
For example, the page is rendering properly inside a narrow div and at the same time is also rendering correctly in full screen mode.
Even though I am using them for a while. I am still impressed by the level of sophistication that can be reached by using Elm+SE(v5).
This is an example of something that I could not have done without Elm, SE (and the Elm Slack community).
Unbreakable Json
A by-product of Loved/Hated Elm Json decoders is that the application is very robust. The App store the data in a Json file (that is also then stringified and saved into the browser Local Store.
This Json structure is editable both from a form, field by field, or directly inside a textarea. Because the Json is decoded/encoded at each keystroke, it is impossible to break it.
You can only do editing that
- Are not breaking the Json structure.
- Are not breaking certain fields such as logo or color. To edit these fields you need to select the entire content and paste at once the now value because just typing you need to go through a series of invalid Json data.
This is not a very useful feature but it was nice to see how it played out.
More about Unbreakable Json: https://medium.com/@l.mugnaini/unbreakable-json-95637300176c
Resources
Inspired by/Made with
- [elm-lang]
- [stylish-elephants]
- [elm-spa-boilerplate]
- [elm-style-framework]
- [elm-styleguide-generator]
- [elm-logo]
Related Posts
Single Page Application Boilerplate for Elm
Demo → Codemedium.com
Zero-maintenance Always-up-to-date Living Style Guide in Elm!
Demo → Codemedium.com
