Tag: JavaScript

JavaScript frameworks and the pace of change

Brian BarnettLeave a comment

Being a front-end software/web/app developer, in 2015, is awesome; we have evergreen browsers from all the major providers, the amount of browser specific hacks we need to use are the fewest. So many things have changed so much for the better. JavaScript as a language is going from strength to strength with the adoption of ES6 and fantastic tools such as babel that let ES5 browsers join the party.

But the rise of JavaScript has felt like a double edged sword of late, and I’m often left feeling like Neo in the Armoury.

http://imgur.com/eFMhXZH
Tank: What do you need? Neo: npm_modules…
lots of npm_modules.

Read More »

Looking Back Over a Year with MUMPS

Brian BarnettLeave a comment

It’s been just over a year working in the NHS, and it has been a very interesting experience where I have had the pleasure to work on some really great new systems using all the modern web has to offer, but have also had to work with and improve/maintain some not so enjoyable legacy systems, one of those being a proprietary stack (InterSystems Caché) built atop the MUMPS language and database.

For those that have not been fortunate to have experienced this environment, here is a very short explanation – MUMPS (or simply M), is a programming language providing ACID transaction processing and is tightly coupled to a NoSQL ‘schema-less’ database Read More »

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.

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.