Posts tagged with "code"

  • Going Static with Hugo

    I have just converted this website from an AngularJS app backed by the Wordpress REST API to a static HTML site powered by Hugo, a static site generator written in Go. This post explains my reasoning, experiences and thoughts about the results. Back in 2014 I was learning AngularJS, and I decided to build my website with it as a learning exercise. I wrote about it here. I was happy with the design, but there were a number of issues with which I gradually grew dissatisfied.

  • Components with Custom Templates in Angular 2 (beta.7)

    Want to create a reusable Angular 2 component which can be customized with a user-provided template? I had this use case and could not find any relevant documentation or tutorials, so after a few days digging around the internals on Angular 2, I am sharing the result of my research. This is one way to do this - perhaps there are other, better ways. Feedback is welcome! (TL;DR - working demo on Plunker)

  • Fixing Chrome Autofill: Mysterious Wrong Values Solved

    On an ecommerce website I maintain, we started running into a strange issue where we were getting orders coming in with the first line of the address being duplicated in the “delivery instructions” field. This was causing all sorts of confusion and mild distress at the office. Today I finally persisted enough to get to the bottom of it. The form was something like this - try it out yourself to see if you also get the first line of your address appearing in the delivery instructions:

  • 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.

  • angular-wordpress-seed: A complete example project with AngularJS and the WordPress JSON REST API

    Last September I wrote a post detailing how I went about re-building this website with AngularJS backed by WordPress. That write-up was a high-level discussion on my choice of tools, design decisions, and lessons learned, rather than specific implementation details. The article proved to be one of the more popular I’ve written so far, and I’ve since received many requests to make the source code publicly available. In response to this interest, I decided to put together a bare-bones version of the code that is running this blog: angular-wordpress-seed.

  • 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.

  • Writing Multi-Element Directives in AngularJS

    AngularJS 1.2 introduced a new feature for the ngRepeat directive which allows the directive to span multiple elements, as opposed to just the single element that it is attached to. This is done by appending -start and -end to the directive name in your view: <tr ng-repeat-start="item in items"><td>{{ item.name }}</td></tr> <tr ng-repeat-end><td>{{ item.innerLegMeasurement }}</td></tr> The code above will output two table rows for each item in the collection - something that was simply not possible to achieve before.

  • 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