One of my favourite and lesser known additions to CSS is position: sticky which essentially allows you to create an element that snaps at a specified position of the page to the top of the screen.
At present, support for position: sticky is relatively non-existent according to caniuse. The desktop browsers that currently have this implemented are Firefox and Safari.
But thankfully there are some great polyfills out there for this, the one I have found to be the more performant polyfill is by the Filament Group.
It seems anything remotely written in or affiliated with Javascript gets compared with Angular these days.
AngularJS vs React.js AngularJS vs Node.js AngularJS vs Ember.js AngularJS vs Microwave AngularJS vs PHP AngularJS vs jQuery AngularJS vs Bear Grylls AngularJS vs AngularJS One thing I see being compared a lot is Angular and Meteor. Whoa. Hold on just a second there.
Let us all just take a step back here for a moment. Angular and Meteor are not the same. They’re not even in the same league. Angular is a roller derby and Meteor is the stadium. While Angular can be used inside of Meteor and Meteor can be used in place of Angular, they are not the same.
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.