One of the most important aspects of a web application (besides the application itself) is how configurable it is. Where you define key global pieces of data accessible to whatever part of the application needs them; name, version number, API endpoints, API keys and more.
This is why I created Aurelia Configuration. A simple plugin for the Aurelia Javascript framework that allows you to have a configuration file for your application and then pull out values (with support for temporarily overriding values).
One feature missing in ES2015 (formerly ES6) classes is the concept of a private variable or function. However, thanks to ES2015 modules we can actually easily define private properties and functions that can only be accessed within our class.
Private Properties in ES2015 classes Using a WeakMap which we have discussed before, we are going to implement the concept of private class properties.
Because classes are just objects, we can use WeakMaps on them. Then by specifying getter and or setter methods on the class, we can control access to these private properties. The beautiful thing about this is that using the export keyword, we are only exposing the class Person. This is akin to the revealing module pattern where we choose what is exposed to the client.
At my day job, I am currently building a pretty complex Aurelia application. One such component of the application is a widget system which allows ES2015 classes to define new widgets and then the system can load them in. I ran into an instance where I needed to convert the class prototype name value to file-case (all lowercased and hyphen separated).
What this will essentially do is take the prototype.name value in PascalCase and convert it. So a classname value of: MyClassName would be converted into my-class-name instead. There isn’t much to the code to be quite honest.
I swear this will be my last Aurelia post for a little while. As the community and use of the framework grows, I thought it would be a great idea to create a repository of handy code snippets for use with the Aurelia Javascript framework.
One of those features is the Value Converters feature where a custom Value Converter can be created to modify values within a View. The repository currently has a few converters for working with dates, a couple for iterating objects and eventually there will be many more.
In Aurelia we already have the power to iterate arrays from within our views and for most purposes, this is fine. However, sometimes there are situations where we might want to iterate an object’s properties or values without needing to normalise it into an array.
In the Aurelia Gitter chat, this question came up, so I decided to create a couple of custom ValueConverters to help with iterating Objects like they were arrays. Other than including the Value Converters themselves, you don’t need to change anything else.
Before Aurelia came onto the scene I had worked extensively with Angular and then shortly thereafter, React.js (sometimes both together). After using React for a while, I became accustomed to passing functions as callbacks to my components. So naturally when I started using Aurelia and creating custom elements, I tried the callback function approach first.
Callbacks are not the answer While I was successful in creating a bindable property on my initial custom elements and then passing a function, it became apparent this approach is flawed. Not only do you have scope issues to deal with, but I encountered issues with singletons not being singletons and struggling to pass exact references.
I know, I just can’t keep quiet about Aurelia. But it is one of the most exciting things to happen to Javascript in a long time. So I decided to write up a quick tutorial on creating a custom element in Aurelia for Select 2, which is a popular library for adding custom select elements to your applications.
Prep Before we begin, you need to have Aurelia installed locally and the development server running. The easiest way to do this is to download the Aurelia Skeleton Navigation project and follow the README instructions. This tutorial assumes you already have an Aurelia project and that you’re not starting from scratch.
Recently whilst working on my day-job project I needed to get a HTMLElement from the DOM and then store it as a string. Using innerHTML obviously didn’t make sense because it would only get the inner contents, not the outer. I wanted the whole element.
The logical choice was the lesser known property outerHTML. I say lesser-known because you don’t really see it used all too much, in face of innerHTML anyway. It isn’t the fact developers don’t know about it, it just doesn’t get used a whole lot.
If you’re a user of Aurelia and you’re writing unit tests, you might have run into some confusion around testing your custom elements, more specifically how you can mock an injected instance of something into a class.
In my case I had a Custom Element which allows me to display a select2 custom select within my application. I was also injecting the Element itself and EventAggregator onto the class using the @inject class decorator.
When it comes to working with your servers (or any remote machine for that matter), public key encryption is a must. The basics are: you register a public key on the server-side and then use your private key to authenticate with the remote machine.
So you’ve generated a new SSH keypair or you have your existing SSH keys in the form of id_rsa or whatever. Now you want to push them to your remote server so you can use your private key to login?