Adaptation of the Elm Tutorial to use postgREST

I have used postgRest to enable data requests from an Elm SPA application to a postgreSQL backend.

PostgRest is a warp web server application written in Haskell that exposes an API to postgreSQL. Elm fetches postgreSQL data via an endpoint using the HTTP module and, as long as postgRest has been configured to recognize the application and the postgRest application has been granted the necessary postgreSQL privileges, the data is retrieved from postgreSQL by postgRest and served to Elm.

This simple model might be all one needs in some use cases.

elm-postgrest Elm client

Found an interesting work-in-progress entitled "elm-postgrest."

The package author published an article describing the design decisions that he considered in starting the project.

One of my recent goals is to separate front and back-ends from each other as completely as possible and to remove pain points in the tool-chain. Elm and stylish-elephants help by adding type-checking via the compiler for front-end work, and elm-postgrest may make it possible in some use-cases to simply treat the PostgreSQL backend as an end-point. Elm is perfectly suited for tasks that call for read-only data display The middleware is based on another project, written in Haskell, entitled postgREST. It turns a postgres Db into a REST API using elm-http and JSON decoders. The elm-postrest package simply connects and issues a query request using a schema and decodes the results. Roles and permissions for the Elm client application are defined in the Db.

Elm list of stylish-elephants github repos

Github repos having "stylish-elephants" in the project name or the project description on GitHub are viewable in a new module named stylish-elephants-search. The README file is a must, as it notes that this demo will not build without adding an Auth.elm file containing a github authentication token.to the project. Also see ftreldman's workshop for details if creating a token and configuring an Elm app to use it are new to you.

This little tool was originally Part 14 of Richard Feldman's Elm workshop.

I refactored his work to use stylish-elephants (and removed many features to test search alone).

Responsive Elm using stylish-elephants

Matthew Griffith (mdgriffith) maintains an Elm package entitled elm-style-elements that moves all style declarations from CSS to Elm view functions. The main benefit is that your styles are type-checked by the Elm compiler -- no more jumping back and forth between the CSS and the DOM and the console to debug sites.

One of the write-ups that I have found instructive on using elm-style-elements to write responsive Elm applications is billperegoy's elm-page-layout.

The source code that accompanies the article is found on github.

I have adapted the approach using the experimental (next version) of elm-style-elements and posted a simple project to github called responsive-stylish-elephants.

The package API for stylish-elephants is online.

Elm on github.io using compiled JS

I ran into an issue using Elm on my github.io pages. My case involved using an index.html page to load the compiled JavaScript.

I used the following reference in the elm-package.json file:

"repository": "https://github.com/jbrgfx/jbrgfx.github.io.git"

Then I generated the JS using elm-make:

elm-make src/Main.elm --output elm.js

Once I committed the change and pushed it to github, my github.io site and the source on my workstation failed to render because of the repo name and its use of dotted separators.

Since my project was built on top of another repo, I changed the reference in the elm-package.json file to the original repo which did not contain dotted separators in the name.

After recompiling, adding and pushing the change, my github.io site was back online.

This fix worked because the dependencies in the both projects were identical; pointing github.io to another package source is an established way of launching github,io pages. I did it as an after-thought and a necessity once I saw the cause of my perdicament. I could have made the choice to import the original project as the base of the pages project and built from that original.

Found note on Elm-discuss indicating that others have spotted the issue.

Elm developers with a CName should not have to worry about this issue.

Review the elm-package.json source on github.

Changing gears . . .

This site was built originally for two purposes, both of which have been achieved:

I wished to popularize Inkscape as a tool and SVG as a format, and others have succeeded on this first front. Inkscape is a very full-featured graphics tool, but i have moved on to using watercolor on canvas and will continue to paint. SVG has been widely adopted and well used.

The site was left dormant as part of the second goal which was to test Search Engine Optimization techniques on an untouched and practically unused site filled with absolutely unique content. The test was successful, so now I wish to actually use the blog to point to newer work coming from the other side of my brain -- programming and software engineering.

On this front, I have begun to learn the ELM Language for front-end development. Recent work is on github.

I chose ELM for three reasons:

1. My back-end side projects all use functional programming languages and I wished to use that same approach on the front-end;
2. And, I wished to separate front-end work as cleanly and as completely as possible from the back-end and to minimize pain-points in front-end development like manipulating the DOM and adjusting CSS;
3. Finally, ELM is type-safe and compiles to Javascript, so the code works without runtime errors and is very portable.

More about how ELM helps me achieve each of these goals in future posts.