Archive for the ‘ Javascript ’ Category

PNG Optimisation File Watcher for WebStorm

Here is a great file watcher that will optimise any PNG file added or modified in the project. It uses OptiPNG and a ‘scope’ called ‘PNG Images’ that targets only PNG images

<TaskOptions isEnabled="true">
 <option name="arguments" value="-strip all -v $FileDir$\$FileName$" />
 <option name="checkSyntaxErrors" value="true" />
 <option name="description" value="Uses OptiPNG to optimise new images" />
 <option name="exitCodeBehavior" value="ALWAYS" />
 <option name="fileExtension" value="Images" />
 <option name="immediateSync" value="false" />
 <option name="name" value="PNG Optimisasion" />
 <option name="output" value="" />
 <option name="outputFilters">
 <array />
 <option name="outputFromStdout" value="false" />
 <option name="passParentEnvs" value="true" />
 <option name="program" value="$PROJECT_DIR$/Tools/OptiPng/optipng.exe" />
 <option name="scopeName" value="PNG Images" />
 <option name="trackOnlyRoot" value="false" />
 <option name="workingDir" value="$ProjectFileDir$" />
 <envs />

Adding CSS to a page through Javascript

There is no sensible reason to use this but it comes in handy as a hack for CMS systems – when there is no other choice!.

var head = document.getElementsByTagName('head')[0],
                style = document.createElement('style'),
                rules = document.createTextNode('.coming-soon-state-selection{margin:25px 0;}.coming-soon-table{width:593px;}.coming-soon-table .title{overflow:hidden;}.coming-soon-table .title h3{float:left;font-size:1.375rem;}.coming-soon-table .title p{float:right;line-height:2rem;padding-left:22px;}.coming-soon-table .coming-soon-state{border-bottom:1px solid #dbdbdb;}.coming-soon-table .coming-soon-state .category .category-title{min-height:40px;border-top:1px solid #dbdbdb;border-bottom:1px dotted #ababab;overflow:hidden;}');

    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = rules.nodeValue;
    } else {

Essential frontend development browser extensions

Here’s the tools I’m currently using for frontend development:
Web Developer – All sorts of useful tools that you don’t get with the browser standard developer tools
PixelZoomer – Screengrab, zoom, measure and colour pick
FireRainbow – Adds JavaScript syntax highlighting in Firebug
Dust-Me Selectors – helps with clearing out redundent CSS
Empty Cache Button – Adds a button that’s a shortcut to clear the cache
FireDiff – Track changes in the DOM

Visual Event – Bookmarklet that displays JavaScript events on the current page
XRay – Bookmarketlet gives you tools for looking at layout in older browsers
CompanionJS – Gives you a console in IE6/7/8! Plus other JavaScript debugging tools.

Bookmarklet that exposes JavaScript events

Really good at answering the question “which script just did that?”

Visual Event

Converting special characters

This JavaScript library is very useful when you’re trying to display code previews in a page.

Non-JQuery script class switcher

Been using the JQuery equivalent for some time. Just had the need to convert it, so thought I’d save it.

It switches a ‘no-script’ class to a ‘script’ class on the HTML element and can be run in the head of the document.

var docElement = document.documentElement;
docElement.className = docElement.className.replace( /\bno-script\b/ , 'script');

JQuery UI Widget Boilerplate

I’m always writing this stuff out again and again so I thought I’d save the most useful stuff for copying and pasting.

The widget

$.widget("ui.aWidgetName", {
    options: {
        requiredOptionOne: null,
        requiredOptionTwo: null,
		optionalOptionOne: null,
        $thisElement: null
    _init: function () {
        var self = this,
            $thisElement = $(self.element); //NOTE: Useful for refining JQuery selectors ie. $(".something", $thisElement)

        if (!!self.options.optionOne && !!self.options.optionTwo) {
            //NOTE: do widgety stuff, but only if required options have been set
        } else {

Accessing an option after init

//NOTE: get
$(".widgetElementSelector").aWidgetName("options", "optionalOptionOne") //NOTE: note the 's' on 'options'
//NOTE: set
$(".widgetElementSelector").aWidgetName("options", "optionalOptionOne", "aValue") 

Custom callbacks

//NOTE: a point where you want to trigger event

//NOTE: when creating a widget
	anEventName: function (event) {
		//NOTE: stuff to do when the event happens

//NOTE: binding after widget init
//NOTE: the concatinated widget/event name is converted to lower case
$(":data(aWidgetName)").bind("awidgetnameaneventname", function () { 
    $(".marketing-video-container object").css({ "width": "0", "height": "0" });