Category: Dev

I’ve been making a living as a software/web applications developer for quite a few years now, hopefully I’ve picked up a thing or two.

I’m primarily a front end developer working with the modern web and JavaScript, and make mainly healthcare and financial applications with tools such as Angular (latest), TypeScript, and RxJS – with a particular passion for user interface design and user experience considerations.

I was also forced to grow a beard so as not to feel like the odd one out at conferences and meetups.

JavaScript Resources

Brian BarnettLeave a comment

There has never been a better time to pick up JavaScript as a first or an additional language, it is quickly becoming the language of the modern web. The current standard (ECMAScript 5) is a relatively small language compared to Java and PHP, and shares their C style syntax, but this is pretty much where the similarities end, as JavaScript is more akin to Lisp in operation.

With the launch of ECMAScript 6 Harmony right around the corner, which brings many conveniences from other languages and transpiled languages such as CoffeeScript – JavaScript is set to get a whole lot more interesting and possibly a little more difficult to understand, so getting a thorough grasp of the current standard before heading into the new stuff is a great way to go.

Fortunately, there have been some fantastic resources become available over the past few years.Read More »

Making the New Twitter Profile Slightly More Bearable

Brian BarnettLeave a comment

The new Twitter profile screens are pretty awful, the design itself I can live with, but the silly varying font size is awful!

To put all the fonts back to 14px in size, paste this into the developer console:

$('head').append('<style>.ProfileTweet-text{font-size: 14px !important; line-height: 1.6em !important;}</style>');

This will stick until a page refresh, twitter will sometimes do this, so its not a permanent fix, but hopefully, Twitter will sort this UI out – there are so many complaints around already!

If you are using Chrome, you can add a bookmark to do this at the click of the toolbar – create a new bookmark in Chrome from the bookmark manager (Ctrl+Shift+O) -> Organize -> Add Page, with the title “Smaller Twitter Profile Fonts” and the url as:

javascript: $('head').append('<style>.ProfileTweet-text{font-size: 14px !important; line-height: 1.6em !important;}</style>');

This will make the fonts for your tweets all the same font-size.

Sublime Text Package Control vs Microsoft ISA Server

Brian BarnettLeave a comment

Getting Package Control for Sublime Text 3 installed when behind a corporate firewall can be a challenge, so much so that I keep forgetting how to do it whenever I get a given a new computer to work on – so time to write this down!

  • Install CNTLM – once installed, open the cntlm.ini file (C:Program Files (x86)Cntlmcntlm.ini).
  • Set your Username to your domain username and your domain to your domain name.
  • Put a # in front of the password line.
  • Fill in the correct IP and Port number for your corporate proxy. (# out the other if there’s only one).
  • Save the ini file.
  • Open a command line and type cntlm -I -M http://test.com
    (note, you may need to cd to the path that cntlm is installed in first)
  • Copy the hash that gets returned into the ini file on the PassNTLMv2 line and remove the # from the beginning of that line, then save the ini file.
  • Run services.msc and find the cntlm service and start it.
  • Add "http_proxy": "localhost:3128" to your Sublime Text User Settings file.
  • Save that file.
  • Copy the installation text from the Package Control Website and paste it into a new file in Sublime Text.
  • Search for urllib.request.ProxyHandler() and in between those brackets add:
    {"http":"http://localhost:3128"}
  • Now, copy all that text and paste it into the Sublime Text console (Ctrl+`) and hit return.
  • You should see package control get installed successfully! (yay) once done, hit Ctrl+Shift+P and type packin and hit return and choose some packages to install!

Phew, all done!

Package Control behind a corporate proxy, if you have any other troublesome apps throwing 407 Authentication errors, then just configure them to point to localhost:3128 and ensure that the cntlm service is running – oh and don’t forget to update the hash in the cntlm config should you ever change your password 🙂

Back Tick Replaced by Double Quote UK Keyboard Mapping for Windows

Brian BarnettLeave a comment

Why do keyboards not have a ” assigned to a key that doesn’t need to be pressed with a modifier?? As a developer, I use the key often, but there isn’t an obvious key to remove as such.

What this keyboard mapping will do, is make the Back Tick ` key the ” instead.

The functionality of the Back Tick key is pushed down the keyboard modifier chain, so the three characters are not lost, but do require some finger contortion skills, however, its far less stress on the fingers not having to Shift+2 any more!Read More »

Removing Twitter Promoted Items

Brian BarnettLeave a comment

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

Brian BarnettLeave a comment

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

Brian BarnettLeave a comment

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 {
font–size: 10px;
color: #d10000 !important;
line–height: 14px;
}
.required–ast {
font–size: 10px;
color: #d10000 !important;
position: absolute;
margin–top: –3px;
margin–left: –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

Brian BarnettLeave a comment

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.