We just added support for Firebase Storage to our SVG
Editor. We can upload images, but
they don't yet show up in our document. This week's exercise is to add an
Image shape type to our SVG editor and create a new one when the images
First, let's see some Elm links.
Easy VR with Elm and A-Frame #2
Part 2: Make the Dino Walk
The second part in a series showing off Elm and A-Frame, for producing VR scenes
[ h/t @tilman_avid and @eduardkyvenko ]
Ellie - A Web-based Elm Development Environment
Ellie puts the Elm platform in your browser so you can try Elm, share ideas,
and bring your programs to life.
Luke Westby / Humblespark has been working on a fantastic web-based live editor
for Elm. If you haven't seen it, it's absolutely amazing. You can also enable
vim mode in the editor by adding ?vim=true to any
[ h/t @luke_dot_js ]
Noah Hall released a few things!
Run Elm files in worker mode from the CLI
Compile and run Elm files in worker mode in a single command. Useful for testing
Node-based Elm apps!
Elm compiler via Node
This allows you to compile an Elm file via node.
Use NPM for managing elm deps
This package is intendend to enable you to use npm to host your Elm packages. It
works by downloading an Elm package from github when passed in.
All of the above are courtesy of Noah Hall.
[ h/t @eeue56 ]
We can upload images to Firebase storage, but we can't yet see them in our
document. For this week's exercise, start with this
- Add an
Image shape type and complete the various
statements, rending an SVG Image Element
- When a file completes uploading, add an
Image to the shapes at the
- Support resizing the image and moving it.
A gotcha: Image elements in SVG need to have a width and height to be valid.
Also, you'll want to use
preserveAspectRatio "none" in order to make the
bounding box properly reflect the image it's holding. Finally, you'll use
xlinkHref to include the href to the actual image the shape is showing.
Good luck, and see you soon!