$ ls -t blog/
Blog
26 posts from my old blog on craigsworks.com, 2012–2015, kept as they were written. Some of the tools have since moved on.
2015
- Generating Roman Numerals
We've been conducting pair programming exercises at work using the excellent FreeCodeCamp, and came upon an interesting problem to solve using JavaScript.
- Tether.js - Transition small movements
I've been using Tether.js recently, which is a great little utility library for dynamically positioning your elements in relation to other elements on the page (similar to the jQuery UI Position plugin).
- Durandal and Webpack: Introduction
This series of posts will explain how to utilise the power of the Webpack module bundler with an existing (or perhaps new) Durandal application.
- Durandal and Webpack: Part 1 - Module format
This post is part of a series of posts entitled Durandal and Webpack.
- Durandal and Webpack: Part 2 - Composition
This post is part of a series of posts entitled Durandal and Webpack.
- GitHub Pages + Webpack Chunks = output.publicPath
If you're looking to use compiled a Webpack application with chunks in your gh-pages repository, you'll need to make sure your output.publicPath is set properly in your webpack.config.js (or similar)…
2014
- gulp-watch-less - Watch LESS @imports
I've recently released a new plugin aptly named gulp-watch-less, which will monitor your .less files using the excellent gulp-watch task, and output changed files to the stream whenever the file itself or any of it's @imports have changed.
- LESS - Generate a deep list of all a file's @imports
Sometimes it's useful to get a list of all @imports for a given .less file, especially if you want to watch those files for changes in your gulp or grunt build steps.
- Bootstrap 3 Buttons and the enable binding
By default, Knockout's enable (and hence disable binding, since they share identical but opposite logic) simply set/remove the disabled attribute.
- Durandal - Type cast queryString parameters
By default, Durandal's router.parseQueryString method will simply provide all query parameters as strings, which isn't ideal if you're working with data heavily.
- Knockout value binding + HTML5 number input
Knockout's default value binding is great in most cases, but when using the new HTML5 <input type="number" / element, it will always return an empty string when the input is a non-number i.e.
- ui.draggable.exclusive - Exclusive draggables
Shout out to a former colleague, who came up with the original concept behind this idea!
- CKEDITOR key event - modifier keys
When subscribing to the key event on a given CKEDITOR instance, the event.data.keyCode property will be the sum of both the associated keyCode and any pressed modifier keyCodes e.g.
- Bootstrap 3 - Disabled dropdown links
Bootstrap 3 has built-in visual support for disabled dropdown menu items as seen from their dropdowns.less file: However, these are simply visual changes and don't actually impact the interactivity…
- jQuery UI Draggable - Droppables in an iFrame
You've got the usual drag and drop use case, but you want to have your draggables in the top window, and the droppables within an iframe (located on the same domain, ofcourse!).
2013
- qTip2 - Now on jsDelivr
qTip2 is now officially available through the jsDelivr CDN, and is the CDN of choice for the library starting from today's update!
- 60fps scrolling using pointer-events: none
Ryan Seddon just posted a very useful CSS tip to increase your scrolling speeds via use of pointer-events: none, based on Christian Schaefer's tweet: @paul\irish Easy.
- qTip2 - v2.2.0 released!
Where to Download Head over to the Download page to customise your qTip2 download and grab the latest version!
2012
- Scratchpad.io – Real-time HTML/CSS rendering
scratchpad.io is a great little web app by Sandbox Labs that renders your CSS and HTML in real time as you type, and includes localStoragepersistence to stop you from accidentally F5′ing it away!
- qTip2 - Pre-release changes (AKA What happened to my qTip styles!?)
qTip2 is under-going to considerable changes over the next few weeks, with a new website on it’s way, a brand new build system to go along with it, and several new features and documentation updates.
- notyfy = noty + CSS themes
After finding the beautiful noty plugin by Nedim Arabacı and forking it, I was surprised to see the lack of pure CSS styling available (without needing any JS, that is.).
- qTip2 – Tip plugin’s dimension options updated
For those of you using the qTip2 nightly builds, as of commit 970cfabacd the tip plugin’s width and height options have changed slightly to become relative to the tips position on the tooltip.
- var, commas and equals
Working with JavaScript for a while (or any other language for that matter) you tend to pick up on a lot of nuances particular to the language, but even long time users get tripped up every now and…
- JavaScript iOS version detection
Small JavaScript snippet to detect the iOS version in use by the user.
- qTip2 - Styles update
In the recent commit today a re-factoring of the CSS stylesheets took place in order to simply the styles qTip2 uses, as well as changes to the underlying tips code to cope with these changes.
- Efficient JavaScript Delta-encoding – Merging JSON objects
NOTE This is a very old blog post and I would not recommend using it in production.