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.
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 are currently working with the Aurelia Javascript framework, then you would know that every so often given the not-so-beta nature of the framework, a new update comes out for one or more of the framework components.
This article is specifically for Jspm users, updating dependencies in Webpack and RequireJS applications uses Npm instead of Jspm.
If you’re not staying up-to-date for each update, it is possible to fall behind. While you might assume that jspm update would work. Sometimes if you’re updating an older code-base, the newer code can and possibly will break your application using update.
Leading off from my previous post about swapping variable values, I thought I would write a follow-up post on how to reverse a string in Javascript. Surprisingly in Javascript there is no native means of reversing a string (I guess there are very few situations where you would need to do that).
This is not going to be an exercise in code golfing. In-fact, I am only going to show you 3 different ways to reverse a string (although there are potentially tens of different ways to do it). My preference is the first solution using Array.reverse, but pick whatever suits your needs.
While most developers will probably never encounter a situation where they’ll need to swap two integer values without a third variable unless you’re heavily into code golf.
While novel and impractical for most purposes, it can be nice to improve your problem solving skills and learn new things by solving problems without choosing the most obvious solution.
A little bit of trivia: I was actually asked to swap two integer values in a technical interview once-upon-a-time. So you never know if you find yourself going for a front-end development position and you’re asked during the coding test to swap two integer values without a third variable.
Life on the front-end side of the development tracks can be an exercise in patience and learning endurance. When it comes to front-end package managers, there is definitely no lack of choices.
In this article I will be focusing on two of the hottest front-end tools: JSPM and Webpack. With Jspm coming to providence thanks to Angular 2 and Aurelia and Webpack being the preference of a large number of React developers.
As Javascript slowly becomes a less salty language thanks in part to ECMAScript 2015 (formerly ES6) amd ECMAScript 2016 (formerly ES7), the question of whether to choose a superset of the Javascript language or write POJ (Plain Old Javascript) is a question we need to ask ourselves.
My experience with TypeScript is rather minimal, whilst investigating Javascript frameworks a few months ago I used TypeScript for a little while to get a feel for it and see what it would offer me in terms of workflow and efficiency. The fact the project would be built in .NET which means using Visual Studio 2013 was also a point towards TypeScript (of which Visual Studio fully supports).
Modern Javascript is a lot different to Javascript of 2010. We have considerably more methods and means of doing things that we did not have previously. Some of those include classes, generators, arrow functions and a few other high-profile additions.
One aspect of Javascript that not even ES2015 nor ES2016 covers is the concept of abstract classes. The ability to specify a class that defines how child classes should look, more specifically ensuring they specify certain methods.