Tagged: elm
Elm Animation Showcase
Here’s a quick demo of a showcase set of Elm animations. Check out the GitHub repo under the Showcase directory; run the app from the top-level Showcase.elm module.
I’ve been meaning to publish a full-featured post for a while, but I’ve gotten bogged down in my studies once again. In the interest of not letting this content get too stale, I’m simply publishing what I have.
This expands upon the prior work I’ve blogged about, with some modifications. At the time of this writing, it demonstrates how to wire up two separate components, each with a collection of different animations (some of which are keyed off of one another, or off of other actions). The two components transition back and forth, too.
- The first component is an animated username/password form.
- The second component is an animated list of items.
At this point, pretty much all work starts from the MinimalModules.elm file included in the repo and builds up from there. Just follow the comments and you should be able to hit the ground running, without worrying about the underlying piping.
I’ll likely expand this showcase set as I find time, but I won’t be updating this post.
Catching Completed Elm Animations
This post continues a series I’ve been writing as I toy with the mdgriffith/elm-style-animation Elm package. I’ve primarily been focused on both learning how to use the animation package, but as I’ve explored, there seems to be room for leveraging a higher layer of abstraction to more rapidly compose and deploy animations. Maybe things will work out, or maybe I’ll crash and burn. Either way, it has been a fun journey so far and I’ve enjoyed talking with the Elm community and the animation package’s author, Michael!
Let’s recap what we’ve covered so far. I’ll be mainly discussing changes that I’ve made to the previous code, so you’ll want to take a look at these posts (especially the first post) before we begin.
- In the first post, I discussed a basic framework for Elm animations that seemed to have fallen out naturally as I was manipulating data types for composing animations.
- In the second post, I extended this framework to perform more complex behavior like swapping view elements for controlling transitions in flow control.
In this post, I’m going to explore detecting the lifecycle of animations and triggering commands based on that lifecycle.
Read on for details, or just grab the code from this Github repo and run with it. You’ll want to look for the FinishAnimation.elm module.
Swapping Elm Animations
I recently wrote about a handy extension to layer animations on top of the standard Elm Architecture.
This post explores taking the basic animation framework and building more complex animations upon it.
Read on for details, or just grab the code from this Github repo and run with it. You’ll want to look for the SwapView.elm module.
Basic Framework for Elm HTML Animations
I’ve been dabbling a bit with the mdgriffith/elm-style-animation package for Elm 0.18 and so far it looks like quite a capable library. I did encounter some headwinds with layering multiple effects on the same HTML element at different times, so I scratched out a basic framework for extending animations. I’ll walk you through the basic extensions I’ve layered on top of the standard Elm Architecture.
What’s the goal of all this? Being able to define easily reusable animations, just like CSS classes! And being able to manage the complexity that comes along with creating many different animations.
Read on for details, or just grab the code from this Github repo and run with it.
Elm Development Environment
First off, my apologies for the deep silence of late. I’m pretty deep in the trenches when my Master’s semesters are running and I simply had to take a personal break during my summer. I’m hoping this post can help me pick up my cadence again!
I recently dove back into Elm development, only to find that the community has evolved rapidly between versions 0.16 and 0.18 (current as of this writing). I thought I’d share my notes on how I have my new development environment set up, now that we have more options beyond simple text editors (or vim).
Right now, my basic environment looks like this:
- Running on OS X Sierra
- Elm 0.18
- Visual Studio Code
- Sascha Brink’s Elm Language Support extension for VS Code
That’s all I’m using to get a nice rapid development environment up and running.
Work-around for “commitAndReleaseBuffer” Compilation Error in Elm
I ran into a compilation bug when following the “Task Tutorial” in Elm’s Reactivity documentation.
This is the output I got when compiling (where Main.elm is the exact copy/paste from the “HTTP Tasks” section of the docs):
> elm-make Main.elm --output=index.html Success! Compiled 1 modules. elm-make: index.html: commitAndReleaseBuffer: invalid argument (invalid character)
From browsing around, it looks like the issue might be that the Elm compiler needs to set a LANG property in the Haskell code that runs the compiler to better specify encodings. Whether it’s relevant or not to the default encoding that failed here, I’m based in the US.
While the bug is still open, read on for a work-around, if you encounter the same issue.
Drawing Triangles in Elm (Beginner)
Hey, let’s draw some triangles! If you’ve been following my last two posts on mouse chasing and drawing rays using Elm, this post will be a simple extension. If you haven’t already read those posts, I encourage you to start from the beginning, because we’ll be making iterative updates to practice getting our hands dirty with Elm.
Once again, this is targeted at newcomers to Elm, so we won’t be covering any advanced topics. If you want to see a quick demo, follow this link and start clicking around!
Drawing Rays in Elm (Beginners)
In my last post, I showed how you can generate a simple mouse-chasing effect with Elm. That was an accidental side-effect for my true purpose: To demonstrate how to draw triangles in Elm. This post will continue along that journey, demonstrating how to generate rays from a fixed point out to the current mouse location using the standard Elm Architecture.
I won’t be introducing any new concepts here; I’ll simply be layering on a little bit more complexity on top of what we’ve learned in the previous posts.
Continue reading
Mouse Chasing in Elm (Beginners)
Continuing upon my last post, I’ll be showing how basic Signal functionality can be used to update a data model in Elm.
Signals are a non-obvious concept to grasp at first glance. The Reactivity guide contains good in-depth instruction about how Signals work, but spending a little time playing with them can really help grasp how they work.
We’ll walk through a simple example to generate a snake-line line that follows the mouse. To see what we’re going to build, you can open up the demo here. (Note that this only works with a mouse, not with touch events. Exercise: Extend this example to support touch events using Elm’s Touch module.)
Let’s explore!
Composing Styles in Elm (Beginners)
I’ve recently started learning Elm and I’ve been excited to find this to be a very powerful language. I thought I’d share some tips as I learn. This post will be about structuring Elm-defined CSS styles in a way that they can be easily composed together.
My target audience for this post is users new to Elm. If you’re already familiar with Elm or Haskell, this will be pretty trivial, but if you’re new to functional programming, the syntax may confuse you!
To see what we’re going to build, you can open up the demo here.
voyage in tech 