Removing Twitter Promoted Items

Create a new bookmark in Chrome from the bookmark manager->add page, with the title “Kill Twitter Promoted” and the url as:
[js gutter=”false”]
javascript:$(‘[class*=promoted], [data-promoted]’).remove();
[/js]
When you click on this bookmark while on the twitter website, the promoted items should be removed from view 🙂

JavaScript Graham’s Scan Convex Hull Algorithm

While working with a significant amount of medical and sales data that needed to be overlaid on a map, I found myself needing to draw regions that contained sales rep positions – but wanted a nice outer hull to be drawn so that reps inside the area did not need to be joined up as google maps was doing when just feeding in the sorted co-ordinates.

After much internet scouring, I just couldn’t find a JavaScript implementation that I was after (or something that did not come with a complete mapping toolkit!), so I started looking at various implementations in other languages (seemed to be mainly C or Java). Once I had found a good explanation of the article and had (hopefully) grasped the math required via Wikipedia – I set off on creating the algorithm in JavaScript.

The resulting code is quite readable, as I am by no means a mathematician, and fairly well commented with unit testing via QUnit to test my logic is spitting out the expected paths.

Usage is quite simple

//Create a new instance.
var convexHull = new ConvexHullGrahamScan();

//add points (needs to be done for each point,
//a foreach loop on the input array can be used.)
convexHull.addPoint(x, y);

//getHull() returns the array of points that
//make up the convex hull.
var hullPoints = convexHull.getHull();

Head on over to the project page on Github, or have a read through the projects GitHub Pages site to see some live examples.

I have applied a couple of bug fixes thanks to some feedback on GitHub, its great to see code originally just written for yourself, being used by others 🙂

ExtJS 4.x form field Quicktips with required asterisk on field labels

The below gist will add Ext quicktips to all child elements of a form/component that have a fieldLabel and qtip property set.

If the allowBlank property is set to false, the fieldLabel will get a red asterisk ( * ) before the label text and the text required appended to the end of the quicktip hover element.

/*Call this method after the form has rendered, so either on the afterrender event, or from within a
method bound to that or a similar event that is fired after the form/component has rendered.
Pass the name/id of the form in a way that can be accessed using an ext component query.
In your view/form items array, for each element that you want to have a quicktip, set the property
qtip: 'your tooltip text here.'
If you want the required asterisk and text, set the property allowBlank: false
e.g.
{ name: 'dateArrived', xtype: 'datefield', fieldLabel: 'Date Arrived', qtip: 'Date customer arrived.', allowBlank: false }
*/
/**
* Loops through all child elements of the passed component (form) and checks for and applies
* any tooltips found with the QuickTipManager.
* @param formName – the name of the component(form) to look for qtip properties.
*/
setupQuickTips: function(formName){
Ext.tip.QuickTipManager.init();
Ext.Array.forEach(Ext.ComponentQuery.query(formName + ' *'), function(el){
if (el.qtip){
if (el.fieldLabel && el.allowBlank == false) el.setFieldLabel('<a class="required-ast">*</a>' + el.getFieldLabel());
if (el.allowBlank == false) el.qtip += '<a class="required">&nbsp;&nbsp;required</a>';
Ext.QuickTips.register({
target: el.id,
text: el.qtip
});
}
});
}
/*CSS Styles used by the quicktip required anchors.*/
.required {
fontsize: 10px;
color: #d10000 !important;
lineheight: 14px;
}
.requiredast {
fontsize: 10px;
color: #d10000 !important;
position: absolute;
margintop: 3px;
marginleft: 7px;
}

view raw
Ext4QuickTips.js
hosted with ❤ by GitHub

The styles at the bottom of the gist will need to be added to an active stylesheet.

Chrome and the Cross Origin Resource Policy

I have recently been working on web applications that need to access data via an API, but having my source locally and the data coming over the API, Chrome wouldn’t let me run the XHR request – although I had been mocking the data for development, I needed to test with the live data before the code went onto the server. For this, I came across two flags that be used to launch Chrome:

--allow-file-access-from-file
--disable-web-security

Putting a shortcut on my desktop with the target as:

"%ProgramFiles(x86)%GoogleChromeApplicationchrome.exe" --allow-file-access-from-file --disable-web-security

gave me exactly what I needed 🙂 If you have Chrome installed in your AppData folder, you will need to use:

"%LOCALAPPDATA%GoogleChromeApplicationchrome.exe" --allow-file-access-from-files --disable-web-security

instead – remembering that using your newly created shortcut will only work so long as there are no instances of Chrome already running.