I recently had the need to integrate bLazy in an Angular 2 project. This is a pure Javascript library so the integration was straightforward but it does have a few drawbacks to be aware of, especially due to the way Angular renders elements. The trick was wrapping bLazy initialization inside a setTimeout() which seems to be the only way for bLazy to properly set itself up. Here’s the code: Read more...

Media queries are useful to adapt the way elements on a page are displayed, or even show/hide elements based on the viewport size. When working with Angular 2, there might be times where you not only want to conditionally show or hide an element depending on the viewport size, but you also need to make sure that your component does not even get instantiated when the app is run on a mobile or desktop. Read more...

UPDATE Grunt and the plugins ecosystem is moving quite fast, and thus this post is a bit outdated now. Although the concepts still apply, Livereload is now embedded in the “watch” plugin and the way to configure the “connect-proxy” plugin to achieve a local proxy to your Web app has changed quite a bit. Documentation has also improved so kudos to the Grunt community! Yeoman is a Javascript code generation and application bootstrapping framework that integrates many extremely cool, bleeding edge technologies for streamlining frontend rich Javascript application development. Read more...

Less CSS is a CSS pre-processor that adds support for many advanced (and lifesaver) features to normal CSS, such as variables, mixins, nested definitions, etc, etc. You basically write .less files that have a syntax similar to CSS itself (with the added functionalities), and these files get compiled as CSS after on. I’ve been wanting to use it for a long time but support for Less in the Groovy/Java ecosystem is scarce. Read more...