Posts tagged with "JavaScript"

  • An Early Look at SKQW: JavaScript Audio Visualizer

    SKQW (pronounced “skew”) is a native desktop audio visualization application written in TypeScript with Angular 2, and implemented on the Electron framework. It is currently in alpha and a compiled binary only exists for Windows, but I’m hoping that - if there is interest - I can push the project forward and improve stability, features and of course bring full support to Mac OS X and Linux. If you want to check out the project itself, go to the SKQW website.

  • Angular 2, CommonJS and Circular Dependencies

    Yesterday I lost several hours to the following error in an Angular 2 app I am working on: Cannot resolve all parameters for 'BaseDataService'(Http, undefined, ODataService). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'BaseDataService' is decorated with Injectable. The undefined in this case is my redux AppStore service. Other dependencies (Http, ODataService) worked just fine. Even weirder - I was successfully injecting AppStore into several other components without issue.

  • Automatic @import of Less/Sass files with Gulp

    This post describes a way to use Gulp to automatically @import Less files from anywhere in your project’s folder structure. It is useful if you want to define self-contained components that put all HTML, JavaScript and LESS files together, yet you don’t want to maintain a list of imports in your main LESS file. The following method should also apply if you prefer Sass, since it uses the same kind of imports system.

  • A Note on Angular Expressions And JavaScript Identifiers

    A variable used in an Angular expression cannot contain a hyphen. This might be obvious to some, but this issue on one of my GitHub repos baffled me for a while, and the solution was really simple and now seems totally obvious to me. I’m making a public note of it so that I may save another frustrated developer a few minutes of hair-pulling. The Problem In brief, I have a directive that takes an id attribute and parses it with the $parse service.

  • Exploring ES6 Classes In AngularJS 1.x

    In this post I will describe a way of using ES6 classes today in your AngularJS 1.x applications. This is intended more as an exploration than a recommendation of best practice. I’ll go into quite some detail about the reasoning and process behind my solution, but if you’d prefer to fast forward to the finale rather than enjoy the adventure, see the last section where I bring it all together, or go directly to the demo app repo.

  • Building a 3D Game with CSS + HTML

    I have recently been exploring some of the lesser-used features of CSS - namely 3D transforms and animations. For a recent talk I gave at a local JavaScript user group, I put together this demo, and in doing so I became really curious about just how far the 3D capabilities of pure CSS could be pushed. In searching around for examples, I came across the work of Keith Clark. In particular, he has put together two absolutely stunning demos of what can be achieved using pure CSS, in the form of a FPS-style 3D world and this shaded X-wing model.

  • CSS + JavaScript 3D Butterfly: A Case Study

    I’ve recently been having lots of fun with CSS 3D transforms and animations. As part of a demo for a talk I am giving at the ViennaJS meetup group this month, I put together a demo that showcases how some fairly sophisticated 3D effects can be achieved with pure CSS, and made interactive with a little JavaScript. _Note: The 3D effect is not currently supported by Internet Explorer. _ CSS 3D Butterfly Demo View The Demo

  • Experiences Building a Website with AngularJS + WP-API (WordPress API)

    I’ve just completed and launched a complete re-write of this website. Since the first iteration (started around nine months ago) and this new one, I’ve learned a lot about the fundamental technologies of the web: HTML, CSS and JavaScript; about AngularJS in particular; and about things like build systems and application architecture. Therefore I wanted to share a few thoughts and experiences I had building this site. This is Not a Tutorial Attempting a tutorial on such a general topic would require a whole series of specialised posts.

  • Enable Rich Social Sharing in Your AngularJS App

    If you are building a public-facing app in AngularJS, you’ll want your users to be able to share it via social media. Indeed, for certain apps, this may be the most important channel of promotion. By “rich social sharing”, I mean something like this: Rich sharing on Facebook Rich sharing on Twitter As you can see, certain sites allow Facebook, Twitter et al. to fetch more than just the standard page title and image.

  • Paginate (almost) Anything in AngularJS

    The ng-repeat is probably one of the most oft-used of all the core AngularJS directives, and with good reason. It offers amazing flexibility and is probably one of the first things to really “wow” you about the framework. Whenever I’ve used ng-repeat, however, I’ve usually also run in to the need to paginate the items being repeated. It seems like there should be some way to do it that is as simple and intuitive as the ng-repeat directive itself.