Project 10 – Firebase and Elm

The Plan

Firebase is a service that I’ve been aware of for a while but I’ve never actually tried it out myself. For those unaware, Firebase offers a set of services intended to replace your backend. For today’s project I decided to try and use Firebase’s Firestore with Elm. It was an utter failure.

Post Mortem

I don’t have any code to show today because there isn’t any, well none that I didn’t delete. I went into this project expecting to be able to read and write to a Firebase database with ease. My plan was to build a simple message board of some sorts. I couldn’t even figure out how to access a database. I almost considered redoing today’s project but I decided not to for two reasons: one, that would go against the spirit of the blog, and two I actually did learn a lot from today’s failure that I’ll be able to apply in future projects.

Key Learnings/Observations

  • Projects should only involve one new thing at a time. In this case I tried to learn to use Firebase and I tried to learn to use Firebase with Elm (something that isn’t well supported). As you would expect most of the Firebase web app docs are written for javascript. If I had used JavaScript I wouldn’t have had to try and translate to Elm on the fly.
  • Pay attention to version numbers of packages. At one point during today’s 20 minute block I tried to use an Elm package called “elmfire” to make working with FireBase easier. What I didn’t notice, however, was this project was built for Elm 0.17 and wasn’t compatible with Elm 0.18
  • Copy paste other people’s code. This sounds bad but hear me out. Learning by example is one of the fastest ways to learn. I’m not advocating plagiarism here but I think if your goal is simply to learn, copy-pasting (and reading what you copy!) from open source example projects aggressively will help significantly.

Sorry I didn’t make anything cool to look at for today’s post. Today’s project taught me some very valuable lessons and I’m now slightly better equipped to make bigger and better things in the future.

-Aaron

Project 9 – A Rudimentary Package Management System

The Plan

If I want to do cool projects in 20 minute time slots I need to get better at code reuse. There’s a lot of great package management tools out there for publishing and sharing code with others. Essentially, I need something like this but for my personal packages. For todays project I set up a rudimentary system for sharing elm modules between projects.

Post Mortem

I’ll admit it’s not terribly interesting but you can see an elm app here that uses a shared “Lib.HelloWord” module for determining what text to display on the screen. Essentially what I did is I set up a lib/elm-lib directory structure and wrote a very simple script that will sym link that directory as Lib in the current working directory. Here’s that script

#! /bin/bash

TEMPLATE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
LIB_DIR="$TEMPLATE_DIR/../lib/elm-lib"

ln -s "$LIB_DIR" "./Lib"

Obviously there are some issues with this approach, the largest of which is version control. For now I’ll just avoid making breaking changes to any of my shared modules. In the future I may set something up with Git submodules if it becomes a problem. An approach I’ve been taking recently to programming is to try and do the absolute minimal amount of work possible – if I suspect something will be a problem, I try to test that theory before putting in the time to fix it.

Key Learnings/Observations

  • I’m not sure what the learning on this one is but I deleted my script and had to rewrite it with 3 minutes left while working on this project. I guess the learning is get more sleep?
  • I made use of my two previous scripts I wrote for this project again today. Automating things where possible seems to save a lot of time in the long run

That about sums it up for today. I’m excited to start writing some Elm modules for future projects. Perhaps I’ll do some in tomorrow’s project.

-Aaron

Project 8 – Elm Style-Elements

The Plan

I love Elm’s unique approach to web dev. Having such a strongly typed language with a smart compiler really takes the stress out of writing code – things just work. A while ago I watched Matthew Griffith’s talk at Elm Europe where he presents his Elm library: style-elements. Style-elements is Matthew’s interpretation of what strongly typed layout and style should look like. After watching the video I was interested but didn’t actually get around to trying out his library. For today’s project I decided to try it out.

Post Mortem

You can see the results here. From my 20 minutes of experience with this library, I can say it certainly shows promise. HTML and CSS give such weird results it was refreshing to get things I expected on the screen, especially when using a new system I don’t  know well. I should mention though that I tried and failed to vertically align the text on each card though I suspect there’s an elegant solution hidden somewhere  in the docs.

Key Learnings/Observations

  • Writing with style-elements does feel more elm like than using the HTML/CSS libraries. I especially found Matthew’s opinion on the issues with elements having multiple children insightful.
  • I got to use my pp-new-elm script from yesterday’s post today. It’s already saved me a few minutes. That 20 minute investment should have paid off within a week or two.

I’ll need to spend more time with style-elements to come to a decision on it but so far it definitely looks promising.

-Aaron

Project 7 – pp-new-elm

The Plan

I’m sick of setting up the same boilerplate code each time I do an elm project. Today I wrote a script to automatically setup a basic elm project.

Post Mortem

Today’s project was reasonably simple. Write some boilerplate elm code once and write a script to copy it over to a new project directory. You can see the bash script here

#! /bin/bash

main() {
 NEW_FILE_LOCATION="$1"
 TEMPLATE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

if [ -f $NEW_FILE_LOCATION ]; then
 echo "File $NEW_FILE_LOCATION already exists."
 else
 mkdir $NEW_FILE_LOCATION

cp -R "$TEMPLATE_DIR/elm-template/." "$NEW_FILE_LOCATION"
 fi
}

if [ $# -eq 1 ]
 then
 main $1
 else
 echo "script takes one argument - the new directory"
fi

If you’ve really been paying attention, you may notice similarities between this script and my pp-upload script from a earlier this week. I was able to use the previous script as a reference when writing this one as they both take similar arguments (a file path).

Key Learnings/Observations

  • The basis of this script is relatively simple. I could reuse a lot of this code to write many different types of templates.
  • Elm is an easier language than most to write templates for. There’s no unique module names showing up in every file that need to be replaced like you’d find in many other languages like Java or C++.

Overall the process was actually pretty smooth for this one. I’ll have to wait until I start another elm project to determine how useful it is.

-Aaron

Project 6 – Sad Snake

The Plan

A few years ago I went to a conference at the University of Waterloo called Undergrad Research Opportunities. The whole conference ended up largely being a recruitment effort for their grad studies program but I remember getting some valuable insight from one of the professors – you don’t want to get accepted to every University you apply to. Being accepted everywhere is a strong signal you undervalued your abilities. I suspect to my American friends this idea is likely drilled into you at a very young age due to the competitive nature of your college system but for me, this was the first time I had encountered the idea. I try to apply it everywhere in life now. If I don’t sometimes feel like I’m in over my head I’m not trying hard enough.

For the first five days of this project things were going too smoothly. I kept trying things and I hadn’t failed miserably yet. So today I set out with my most ambitious 20 minute project yet. I attempted to build snake. In the end I got maybe halfway. This one may not be as interesting to look at but for me in terms of learning it may have been the best one yet.

Post Mortem

You can see the results here. It’s not terribly interesting. After 5 seconds the red dot disappears from the center of the grid.

Let me explain what’s going on. I’ve never actually implemented snake before but I’ve had a mental implementation kicking around since at least second year university. Basically, have a 2D array of integers, a player direction, a player size, and an X/Y position for the player. Each game tick decrement the entire 2D array by 1 and update the player position by their direction if the new player position is non-zero, gameover, otherwise set the array value at that position to the player size.

From the explanation you can probably guess what’s happening now in the app. The player starts at a size of 5, but movement wasn’t implemented yet and the snake dies after 5 ticks.

Key Learnings/Observations

  • I haven’t decided if it’s readable code but the decrement the entire 2D array by 1 function makes a cool 1 liner in Elm: List.map (List.map ((+) -1 )) board
  • My biggest stumbling block was subscriptions still. I had trouble reading the docs on how to use Time and Keyboard subscriptions. I should spend more time with this.
  • My Elm apps are starting to get big enough I may want to start splitting them into multiple files. Writing a elm project generator script would help with setup if I do this.
  • I added more explicit type signatures to functions this time around and it helped a lot. Compiler errors were far easier to read. I think this one was a big time saver.

While not a success in the traditional sense I am happy with what I learned. I’m definitely getting faster. Perhaps, within a month or two I’ll be able to revisit snake and actually complete an implementation in 20 minutes.

-Aaron

Project 5 – Elm Clicks and Lists

The Plan

For my fifth project, I’m back to Elm. I wanted to get more comfortable with subscription based messages and elm lists so this time around I mad a web page that displays a dot everywhere the user clicks.

Post Mortem

You can see the results here. This project largely builds off of what I learned in the mouse animation project I did previously this week. I’m quite happy with the results. I honestly went into this one expecting to fail miserably.

Key Learnings/Observations

  • I absolutely need  an elm skeleton code generating tool. It’s getting very tiring copying the same boilerplate code every time I do something we Elm.
  • Adding explicit type signatures to functions in elm makes the compiler errors much easier to interpret. In the future I will do my best to always write these.
  • Working with CSS style in Elm right now is a big pain point for me. I’m aware of some libraries like Elm-CSS or Elm-Style that are supposed to make this easier. I should make an effort to learn one of those
  • My upload file to S3 script that I wrote for yesterday’s project worked great today and already has saved me a couple minutes.

I’m still a little surprised I succeeded on this one. I haven’t yet finished my first week of blog posts and I’m already feeling like I’m improving significantly. Next I think I’ll either look into writing a skeleton code generation tool in Elixir or dive into Elm-CSS/Elm-Style.

-Aaron

Project 4 – Easier S3 Uploads

The Plan

As I mentioned yesterday, I’m getting tired of manually uploading files to S3 to share. Today I wrote a short bash script to handle this task in one simple command: pp-upload <filename>.

Post Mortem

While looking at a bash script isn’t pretty I’ll throw it up here.

#! /bin/bash
main() {
 FILE="$1"
 BUCKET=aaronpeddle.com

 if [ -f $FILE ]; then
  aws s3 cp $FILE s3://$BUCKET/ --acl public-read

  URL="https://s3-us-west-2.amazonaws.com/$BUCKET/`basename $FILE`"
  echo $URL
 else
  echo "File $FILE does not exist."
 fi
}

if [ $# -eq 1 ]
 then
  main $1
 else
  echo "script takes one argument - the file"
fi

Bash has so many weird gotchas, it always takes me longer to write bash script than I expect. Today I ran into something weird where assigning the results of “basename $FILE_PATH” to a variable was unsetting $FILE_PATH. I had no idea why this was happening and given the 20 minute time restraint I didn’t have time to figure it out. If anyone reading this has a theory I’d love to hear it.

Key Learnings/Observations

  • Bash Scripting will take longer than I expect. In the future I’ll need to budget more time for tasks then I intuitively think I need.
  • There’s a significant amount of boiler plate code for a basic script. I wonder if making a skeleton code generator script would be useful here.

I’m quite happy with this one. This is definitely my most useful project yet. I’ve symlinked this script onto my PATH and will be using this script frequently for future blog posts. For tomorrow’s post hopefully I’ll get to test it out in practice.

-Aaron