Single Element CSS3 Only Checkbox On/Off Replacement Toggle

Everyone has beef with checkboxes but in modern browsers it’s super easy to use the click event on the label and hide the actual checkbox. I’ve used a single element with :before and :after pseudo elements to render an on/off toggle switch which provides much better clarity and consistency across browsers.

AngularJS ng-cloak Loading Indicator

NgCloak hides parts of an angular application before it builds, sometimes this can leave white space and elements spring out nowhere when loaded. This is why you might want to show a loading indicator in place of the ng-cloaked elements. The application isn’t running so the loading indicator shows, you’ll need to click to bootstrap the app.

Countdown Timer Angular Directive

So I needed a countdown timer for a release date to put on the top of a website I was working on. Now-a-days I write angular fairly exclusively so what better way than to make a sweet angularJS directive for my timer. It’s pretty straight forward, the data attributes bind the directive and pass the end-date for the time to count to. The rest is a simple interval timer calculating the difference between time.now() and the end-date.

Update: To the moon… @codepen.

codepen gareth weaver

Better radio and checkbox replacement with jQuery

I made an update to this checkbox replacement script. Now with inputs nested inside label elements the script listens for change events on the inputs and updates the replaced checkbox accordingly. This script is designed to easily replace all checkboxes and radio inputs across a whole site with just 12 lines of coffeescript. It’s a much better way of doing it as you can toggle your checkboxes with javascript and not have to worry about whether your input replacement is in sync.