Introducing gridmanager.js

A way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, TinyMCE. 

So over the weekend I was becoming annoyed with the lack of layout tools which you could use with a Rich Text Editor. Specifically, users would get bewildered by divs everywhere with Bootstrap. Let’s face it, if you’re not a coder, adding a row or clearfix class, then specifying divs with col-md-6 etc isn’t exactly straight forward.

This is designed to work in conjuction with TinyMCE (and others to follow hopefully); it uses HTML5’s contentEditable attribute to hook in -inline- instances of TinyMCE. Rows are sortable on the y axis, and you can add or destroy new rows easily.

It identifies all your col-md-* divs – so anything with class=”col-md-6″ (or any other number), changes the contentEditable to true, which in turn loads in TinyMCE. When you’re done manipulating the DOM, previewing strips out and destroys all the TinyMCE instances, removes any additional markup, strips out inline styles on columns and lets you see the markup you’ve just created in the page, as actually will be!

Saving posts the contents of the main div to a URL via ajax as specified by you in the configuration. You can customise the column layout buttons by passing in an array of widths, i.e, [8,2,2] will create col-md-8 and then two col-md-2’s. Handy if your bootstrap grid actually uses 24 columns rather than 12.

So what started as a simple jQuery script seemed to merge into (my first) jQuery plugin. There’s probably a tonne of improvements to be made, i.e, no support for multiple instances or nested columns, but that might be an interesting challenge in the future.

Try it and let me know your thoughts:

Demo | Docs | GitHub Repo

jQuery / jQuery UI / CKeditor4 / Layout Editor

In my search for a visual composer style plugin but *not* for wordpress, I didn’t find much. So I thought I’d try and build one (jQuery isn’t my strong suit) – what do you think?

Edit: now released as a jQuery plugin: gridmanager.js

Blank HTML emails at outlook.com

Just came across this odd behaviour  – using sendEmail() on a cfWheels app to send registration emails to a hotmail or outlook.com address results in a blank page.

The email and it’s source get through fine, including plaintext variants, but just don’t display.

The culprit? any tags (i.e, <foo>) within a CSS comment. How absurd is that? Well, hopefully it helps someone, somewhere.

My new favourite SQL function – SUBSTRING_INDEX

So I needed a quick way to convert a list of authors from “Joe A. Bloggs” into “Bloggs, Joe A.” –  i.e, not separated out into firstname and lastname fields, just one field called ‘name’. I then needed another field to return a single column with the first letter of the lastname for display purposes.

Turns out this magically easy in mySQL.

SUBSTRING_INDEX “returns the substring from the given string before a specified number of occurrences of a delimiter.” So in our example, “Joe A. Bloggs”, I want to return the last string delimited by a space, chuck in a comma, then put the first part of the name after. The reason I want to do the last part of the string (and not the first) is that as a generalisation, names could be in the format “firstname lastname”, “firstname initial. lastname”, or “firstname, initial1. initial2. doublebarrel-lastname” (in my particular circumstance anyway).

The resultant query then ends up looking like this:

SELECT
authors.id,
authors.name,
CONCAT(SUBSTRING_INDEX(TRIM(authors.name),' ',-1), ', ', SUBSTRING_INDEX(TRIM(authors.name),' ', 1)) AS reversedName,
LEFT(SUBSTRING_INDEX(TRIM(authors.name),' ',-1), 1) AS firstLetter
FROM authors
GROUP BY authors.id
ORDER BY SUBSTRING_INDEX(TRIM(authors.name),' ',-1) ASC;

Neat!

Scaling your hosting environment with free services

There comes a point in life when your current hosting environment needs to scale up, and quickly. It might just be that one of your clients gets very popular very quickly, or the gradual adding of sites and resources starts to make services fail. Thankfully there are a few tricks to make life a little bit easier. The less services you can run on your VPS, the more of that precious RAM can get put back into mySQL/Apache etc.

Free Domain based email (https://domains.live.com)
By ‘Domain based email’ I’m referring to sending mail as me@mydomain.com – and not having your webserver or mail client send it ‘on behalf of’, which I think doesn’t look massively professional (and indeed, is a lot more likely to set off the spam filters). Up until a year or two ago, I’d use Google Apps – annoyingly they’ve cut off their free tier; so now the only really free alternative is outlook.com – see https://domains.live.com/signup/signupdomain.aspx – you can do IMAP mail too, so it’s a very useful service. Saves you running your own mail service!

Free Transactional email with Mandrill (http://mandrill.com/
Speaking of sending email via your webserver – ever had mail from your webserver go into people’s junk mail? Ever had your server blacklisted for sending too much mail? Or just been rate limited by Google et al? These are fairly common complaints when running your own VPS: I’ve recently setup Mandrill to deal with all my server-side mail – so far I must say I’m rather impressed. There’s two main ways to do this – either setup your app itself (be it WordPress/Drupal etc) or make your server’s MTA (such as sendmail/postfix) send via the Mandrill SMTP service (or indeed via the Mandrill API directly from your code). Mandrill is free for the first 12,000 mails per month, which will probably be enough for most people I’d wager.

Free Email Troubleshooting (http://mxtoolbox.com/)
This is a stupidly useful tool for checking all things email related, actually, domain related too – try the domain health tool, should hopefully flag up any issues (although some of the warnings are a little strict).

Free AntiSpam service (http://mollom.com/)
It’s not flawless, but if you run a low traffic blog (sub 50 legit posts a day) it’s better than nothing. Has the requisite Drupal/Wordpress modules too.

Free CDN and DNS from CloudFlare (www.cloudflare.com)
This is a bit of a no brainer if you’re not using SSL – change your nameservers over to cloudflare, and you can take advantage of some basic threat management, and a free automatic CDN for static assets (not HTML). Just remember to install the apache/wordpress/drupal plugin to get the referring IP address back from CloudFlare – this is a reverse proxy, so if you don’t understand the implications, do a bit of reading first. You get some (very) basic analytics too, which leads me to..

Free webstats via Google Analytics (www.google.com/analytics)
OK, so Google Analytics has been around for ever, and although Google probably uses your data for everything, it’s still a very useful service indeed. Stats, stats and more stats. Saves you running a serverside stats package (unless of course, you need to track things like direct access PDF downloads – although there are some tricks via URL rewriting which can get around that).

Free Web page testing (http://www.webpagetest.org/)
This is really useful when you’ve setup a site on cloudflare, and you want to test the reverse proxy – but just generally, it’s one of the best site insight tools I’ve seen in terms of loading of assets, working out where they’re coming from etc.

So it’s amazing what you can get for nothing these days: naturally, all these services have their limitations – i.e, 12k emails a day from Mandrill, no SSL for the free version of CloudFlare, etc, but for a lot of websites out there this won’t be an issue.

Mura CMS vulnerability – might apply to your cfWheels app

Just a head’s up:
This recent Mura CMS issue is something which could possibly apply to a wheels app:

http://www.trunkful.com/index.cfm/2014/1/29/Mura-CMS-Vulnerability

I’m not referring to the file manager upload bit (although that could possibly apply), but the role escalation. That is, rewriting POST variables and resubmitting in order to gain admin privs.

Ask yourself, “do I have a public user account creation form” – if not, and user creation is always by an admin level user to start with (and that the user controller is sufficiently locked down), you’re probably fine.

But if you have a user creation form which is publicly accessible,  have you used cfWheels protected properties for the ‘role’ field, or something like ‘isAdmin’ field?

Have a think how but submitting a custom POST request, but simply changing role=”admin” could affect your application. I know I’ve been guilty of this in the past! One quick solution if you don’t want to go down the protected properties route is to separate out your role functions into a separate view/function, which can then do specific checks, and in the user account creation, overwrite any role value passed in with a sensible default.

There’s more on this here – https://groups.google.com/forum/?fromgroups#!searchin/cfwheels/mass$20assignment/cfwheels/bOQo9-CHJlA/xtAVjcvzNMgJ 

This isn’t an issue with wheels per se, just a very common coding practice which can potentially leave a hole open to attack!

RSS2 & iCal for RoomBooking System

Since Jan 2014, RSS2 and iCal have been added – these are a bit experimental – would appreciate feedback!

Each user can have a unique key generated for them by an administrator (it’s not there by default);
Once an API key is available for that user, and their role allows it, they should be able to access /api/ which will display a list of available feeds.

Feeds are ‘All’ (i.e all locations) and then split down by location, so you could have RSS for a specific location if you wanted.

Note that after creating an API key for that user, the user will need to login/out again to be able to use it, but should then see “Data Feeds” as a menu option on the Events drop down. Once they’ve got the URL with the token, that will then bypass the authentication, so you can get read access to the upcoming events.