A unique scenario popped up recently during a project I am building with Aurelia. I needed to cleanly be able to insert SVG images from a folder in my app and display them inline. Duplicating the SVG’s and inlining them was an option, or creating a custom element seemed like a better choice. What I ended up coming with is the rather simple, but elaborate looking custom element which essentially replaces itself with the contents of an SVG.
Recently whilst working on my web app Built With Aurelia I encountered a situation where I needed to sort by the highest upvoted items, but also sort secondly by the recently added items. The collection of items would look like this: Item 1 (5 votes) Item 2 (3 votes) Item 3 (2 votes) Item 4 (2 votes) Item 5 (1 vote) Item 6 (1 vote) Item 7 (0 votes) Item 8 (0 votes) Item 9 (0 votes) Item 10 (0 votes) The code that I wrote to achieve this was the following using the sort method in Javscript:
Built With Aurelia is a nice little application that showcases what the Aurelia community are building with Aurelia and has been in the making for a while now. The idea stemmed from there being nowhere (until now) to see the great things that the Aurelia community have built. Initially it was going to be solely just applications, but the site also includes plugins and themes. So if you’ve built something with Aurelia as well as something for use in Aurelia, feel free to submit it to the site.
So you’re using the CLI to build your next Aurelia application and you want to use the Fetch client? You might have noticed by default it does not come configured with the Fetch client. Fortunately, adding it in is a piece of cake. Firstly, we want to install the Fetch Client as well as a Fetch polyfill: npm install aurelia-fetch-client whatwg-fetch --save Now open up aurelia_project/aurelia.json At the bottom in the bundles section, more specifically vendor-bundle.js look for the prepend section and add in the polyfill as this will be global and we want to include it before anything else. You might notice I put it above the RequireJS line.
As much as I love Npm, it can be quite buggy at times, especially on Windows. One such error I encountered recently was trying to install the latest version of the Aurelia CLI by typing npm install -g aurelia-cli in most cases this just works and updates the existing version. However, a couple of times now, I kept getting some error about “ENOENT: no such file or directory, rename” and then something about a node_modules/.staging folder.
It has finally happened. After a long beta and relatively short release candidate period, Aurelia has hit a version 1.0 stable release which you can read more about here from the horse’s mouth. This means you can now safely use Aurelia to build your applications with confidence that it will be stable. In all honesty, Aurelia as a core framework (not so much the tooling) has been stable since mid 2015 for me. Over the last year and a bit I have seen this framework grow from a small idea to an impressive and easy to use framework.
Two of my favourite additions to ECMAScript 2015 were the const and let keywords. Sadly, I see them being misused quite often on many public repositories and even in some projects I have worked on. Const (constants) If Javascript is not the first language you have worked with, then you will be familiar with constants in other languages like Java or PHP. A constant is an immutable variable. An immutable variable means its value will always be the same, it never changes (hence why they’re called constants). Also worthy of note is like let block scoped variables, constants are block scoped as well.
If you are developing an Aurelia application, just so happen to be using Webpack and need to support Internet Explorer 10, then you will probably want the MutationObserver polyfill. The polyfill is installed via the Github repository, so you need to make sure that you only install a release version which has the individual polyfill scripts for different Web Component features. At the time of publishing this was version 0.7.22.
As promised, I have open sourced my quick Aurelia CLI project Pokego.run which you can find here if you just want the code and don’t want to keep on reading. I am open sourcing the work I have done on this because I want to see the Aurelia Javascript framework grow and I realise there are not a lot of apps out there for reference which are public using Aurelia. Consider this a helpful learning exercise.
I work a lot, so it was nice to get some downtime to play with the Aurelia CLI. Like many others of my generation, I have been caught up in the Pokemon Go hype. So I decided to build a simple app where you can plot where you have found Pokemon called: Pokego.run. The idea stemmed from the question: what if you could determine with close accuracy what area has what Pokemon and eventually work out when they would appear.