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:
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.
One of the biggest upcoming additions to Javascript (in my opinion) is support for async/await. If you have worked with a language like C# before, then you will immediately know why async/await is fantastic.
Currently async/await is in stage 3 which means it is almost a completed specification. At the time of writing this post, surprisingly Microsoft’s Edge browser is the only browser which has added in support for async/await.
Support alert:
While async/await will soon be standardised into the TC39 specification by the end of 2016 (hopefully) you still need to use a transpiler like Babel to add in support. At the time of writing this, TypeScript lacks support for async/await, so you need to use Babel with it.
It is that time of the week for Obvious Javascript Tip of the week. You probably already know how to delete an item from an array, maybe not. Sometimes it can be confusing, do I use the delete keyword, do I use slice or do I use splice?
Splice of life Using splice we can remove items from an array by providing the index (with the first item being zero).
Show of hands if you can off of the top of your head remove/trim a character from the start or end of a string. If your hand remained down, don’t feel too bad. There are so many string manipulation methods in Javascript, it can be confusing.
We have; substr, substring and splice (just off the top of my head). Not many people can tell you the differences between the three without Googling.
If you have an array of objects and you want to filter the array to remove duplicate objects but do so based on a provided key/property, this might prove to be a problem you would expect Javascript to address natively. If you are using Lodash then you have many methods at your disposal that can help.
Fortunately, if you are working with ES6 and up, writing some basic Javascript using the filter and map functions makes this possible.
Support for Object.values(), Object.entries() and Object.getOwnPropertyDescriptors() has landed in the Google Chrome dev channel. These newly added methods are currently candidate proposals and at stage 3 for the ES2017 specification. Many of us were using Lodash for some of the aforementioned missing features from browsers like Object.values. So these are welcome additions.
Keep in mind that these have not landed in the consumer release version of Google Chrome, maybe in a month or two we will see these released, perhaps even sooner. For the moment they are hidden behind a flag and only in the Canary version, enabled in options under “Experimental Javascript”. I did not realise these additions were so far along in the specification and hopefully provided there are no delays, we see them land in the finalised spec later next year.
Plain old CSS is boring. If you are building your applications off of the Aurelia Skeleton Navigation then it ships with support for working with regular CSS.
Adding in support for working with Sass in your Aurelia applications is as easy as whistling dixie. We are also going to be adding in support for Autoprefixer as well so we can automatically add in browser prefixes for all of our CSS without worrying about browsers like IE10 and what they can support.
In Angular 1.x you had the concept of a controller, directive, service, provider and other confusing terms to describe essentially what is one or two things.
What is an Angular service
An Angular service no matter how it was defined is a singleton. Every part of your application gets the same reference when it requests a service or factory.
Angular services in Aurelia
The concept of controllers, services, providers and factories does not exist in Aurelia. Everything is just an ECMAScript 2015 class with hints of future specification features like decorators thrown in for good measure. This works in our favour because porting an Angular service to Aurelia requires very little to no effort.
On a per route basis you might want to configure some additional route specific data that you can access in your view. For example a route might have an icon for your navigation menu. This actually came up in the Aurelia Gitter chatroom and I decided to do a quick little write up.
Say hello to a little unknown property called settings
Added all the way back in February 2015 when Aurelia was still a tiny blip on the Javascript radar was this property which allows you to define an object of additional properties for a route, similar to how Durandal does it.