Colorpeek: A simple Way to See and Share CSS colors

This is really cool, personally I like the ability to scrape prominent CSS colours from images and websites.

It’s available as a website and as a chrome plugin, the article linked to does a better description of it than I could do.

What Screens Want

A long, but very good read on our approach to designing websites.

Railo after Upgrading to OSX Mavericks

Recently I upgraded my MacBook pro to OSX Mavericks (10.9). Almost everything worked nicely until I tried to open a development page I serve using Tomcat-Railo (3.3.1 I think) and I got nothing…

So without further preamble I am going to chronicle my problems and their solutions in a few short steps to get you going with Railo on OSX Mavericks. NOTE: these instructions are if you use the OS’s inbuilt JVM, if you use a bundled JVM you probably only need to follow Step 1 and 3.

The default place of {Railo Home} is /Library/Railo/.

Step 1

DON’T PANIC!

No seriously – it’s not all that bad, you don’t need to upgrade/reinstall anything. Then Shutdown Railo using {Railo Home}/connector/railostop.sh, just to be safe (it probably isn’t running anyway).

Step 2

Install Java – any variant should do (or did for me). The issue here is that Mavericks uninstalls all your previous versions of Java quite happily and without letting you know. I installed the latest jdk which was Java Platform (JDK) 7u45.

This should then install to /Library/Java/JavaVirtualMachines/jdk1.7.0_45.jdk/

Step 3

Fix apache – see this blog post here: http://mallinson.ca/post/web-development-with-mavericks/

Step 4

Change/Add the setenv.sh script to tell railo/tomcat where java is. You find this file at {Railo Installation}/tomcat/bin/. Mine reads as follows:

<br />JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_45.jdk/Contents/Home<br />PATH=$PATH:$JAVA_HOME/bin<br />CLASSPATH=$CLASSPATH:$JAVA_HOME/lib<br />

Step 5

Start Railo using {Railo Home}/connector/railostart.sh.

Your sites should be working again!

Bootstrap and Affixed Nav for mobile.

Recently I have been working on a new website for my primary contract referrer, I decided to use Bootstrap 3.0 as my base and as an absolute necessity it should look nice on all platforms (even mobile). Note that I am part of this group that doesn’t believe that it should look the same on all browsers, platforms and screens, just that it looks nice.

My first issue was quite interesting as I found that my wonderful iPhone’s default browser doesn’t support position: fixed (See http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html for more detail on this). This means that my nice affix plugin using navbar only worked on normal browsers and not on my iPhone. This I decided was not an acceptable solution, so I started googling, then I googled some more and came up fairly blank. Yes there were a couple of bit’s and pieces here and there that hinted it could be done, but nothing that hit all the targets of: Bootstrap 3.0 Affix Navbar.
So cobbling together some other answers I came up with this: http://codepen.io/SimeonC/pen/lhGjC (or http://cdpn.io/lhGjC for without the code frames).

Once you’ve had a look at the example keep reading for the full breakdown.

Concept

The concept is a combination of the affix plugin as it works normally, and on mobile (in this case smaller screens) we work around the position: fixed by absolutely positioning the navbar at the top all the time. Now this isn’t a perfect solution – I just didn’t want to use more javascript than necessary. You will notice that in the mobile version we do not affix to top when it scrolls down – it is always pinned to the top. My reasoning for this is that though it’s fine for a desktop site to show the menu only later when you’ve scrolled down, as a usability point I find that if I’m using a mobile it’s not to look at the pretty pictures – hence the most important thing on a mobile is navigation around the site. We put our contact us button in the menu so it’s easy to see and click all the time.

Implementation

The demo has 2 main parts to it – the <header> and the <div id=”scroll-wrap”> parts. The HTML is basic, nothing fancy to see there we just place the header element then all our content inside the scroll-wrap element. In the CSS is where the fun starts. As you probably have heard – it’s a bad idea to try change how things are done via browser sniffing as IE 11 for one has started lying about what it is! So to embrace this I design my sites using modernizr and for size of screen rather than type of screen. On smaller screens – to target the iPhones in particular I use media queries to absolutely position the header and then the scroll-wrap for the remaining viewport area. We then use overflow: scroll to make this the scrollable area (Note the use of  -webkit-overflow-scrolling: touch this means the div scrolls nicely on my iPhone). Nice thing about this approach is that the menu stays “Fixed” at the top. If you are using this method do keep in mind that the screen is small – the bigger your fixed area the smaller the screen to read on I’d recommend not using up more than 10-15% of the screen height with fixed elements especially if you set user-scalable to no.

Last Words

Another thing I haven’t demoed here is using bootstraps scrollspy in this situation – a simple solution is to initialise it twice:  $(‘body’).scrollspy(); $(‘#scroll-wrap’).scrollspy();. Though not perfect it does get the effect to work as only one scroll event will fire depending on how the CSS has changed the scroll-wrap.

Admittedly this won’t suit everyone and for some if you are fine with an always absolutely positioned navbar (or similar) on smaller devices you won’t need any of this. For those of those it helps – do leave a message, it’s nice to know the views aren’t all spam-bots!!

Reference: For why browser detection is bad: http://css-tricks.com/browser-detection-is-bad/

AngularJS drag ‘n’ drop re-order in ngRepeat

EDIT I’ve just got a github up for this here: https://github.com/SimeonC/ngRepeatReorder. I’ve fixed some of the bugs in the code and updated it to run on the 1.2.x angularjs codebase.

I’ve been busy on some small projects that I’ve been doing recently and a little problem I’ve had to overcome is the difficulty of doing drag ‘n’ drop reorders in an ngRepeat.

After looking around the web I came up with the following solution:

See the Pen AngularJS ngRepeat Drag n Drop by SimeonC (@SimeonC) on CodePen

How It Works

In short this works by starting with the ngRepeat code in angular.js. Which in itself is complex as you have to also copy over a bunch of functions that it uses that are hidden elsewhere in the codebase. Then you add all the lovely complexity of moving elements around – I decided to simplify this by limiting the movement within the list bounds and only do vertical re-ordering. I animate this by fiddling with the margins – creating a gap where the ‘dragged’ element is going to drop into and then using +/- margins to position the dragging element correctly. Also we add in classes for display purposes.

The last hurdle I had to overcome is to modify the ngRepeat element before our modified ngRepeat compiles the element, I did this with a second directive that executes before the ngRepeat and adds the event tags onto the element.

Breaking up really long words Cross browser

Best solution for cross browser css only way of stopping really long words from overflowing.

Why I’ve come to love functional programming

Recently I have been starting to learn Node.js and inadvertently changed my opinion of functional programming VS Object Oriented programming. During my work on supporting legacy Coldfusion sites I stumbled across some code that forms the basis of this comparison of functional programming VS Object Oriented programming. (PS if you want a good introduction to the differences look on over to: http://steve-yegge.blogspot.com/2006/03/execution-in-kingdom-of-nouns.html).

This particular example will be Coldfusion and Pseudo-javascript (or coffeescript) and focuses around a multi-keyword search on 3 columns on 2 tables. Our tables are as follows:

Table Name: Jedi
With Columns: Name, Planet, Lightsaber_Colour.

Table Name: Sith
With Columns: Name, Catch_Phrase, Teacher.

First of all we will define a master function, and a convenience function for searching each of the tables, we do this for an attempt at reusability. We’ll call this main search function “galacticSearch” which will return a SQL string and take the arguments: Keyword (required, string), table (required, string) and andFlag (optional, boolean, defaults to true). The andFlag determines whether our search will return with all the keywords or any of the keywords (AND and OR searches respectively). The SQL returned will be less than perfect as really we should use something more forgiving and inclusive than the ‘=’ operator, for example in MSSQL name LIKE “%#ListGetAt(arguments.keywords, i, ‘ ‘)#%”. Also the params should be using cfqueryparam etc etc, it’s not perfect code but it doesn’t have to be production code for illustration purposes!

Here’s my implementation in Coldfusion, standing up for the Object Oriented languages:

<cffunction name="jediSearch" returnType="string">
	<cfargument name="keywords" required="true" required="false" type="string">
	<cfargument name="andFlag" required="false" type="boolean" default="true">
	<cfreturn galacticSearch(arguments.keywords,'jedi',arguments.andFlag)>
</cffunction>

<cffunction name="sithSearch" returnType="string">
	<cfargument name="keywords" required="true" required="false" type="string">
	<cfargument name="andFlag" required="false" type="boolean" default="true">
	<cfreturn galacticSearch(arguments.keywords,'sith',arguments.andFlag)>
</cffunction>

<cffunction name="galacticSearch" returnType="string">
	<cfargument name="keywords" required="true" required="false" type="string">
	<cfargument name="table" required="true" type="string">
	<cfargument name="andFlag" required="false" type="boolean" default="true">
	<cfscript>
		var sql = 'SELECT * FROM #arguments.table# WHERE ';
		//loop through the keywords
		for(var i = 1; i LTE ListLen(arguments.keywords, ' '); i++){
			//change the columns for each table
			if(arguments.table is 'jedi'){
				sql &= "(name = '#ListGetAt(arguments.keywords, i, ' ')#'";
				sql &= "OR planet = '#ListGetAt(arguments.keywords, i, ' ')#'";
				sql &= "OR lightsaber_colour = '#ListGetAt(arguments.keywords, i, ' ')#')";
			}else{
				sql &= "(name = '#ListGetAt(arguments.keywords, i, ' ')#'";
				sql &= "OR catch_phrase = '#ListGetAt(arguments.keywords, i, ' ')#'";
				sql &= "OR teacher = '#ListGetAt(arguments.keywords, i, ' ')#')";
			}
			if(i LT ListLen(arguments.keywords, ' ')){
				sql &= (arguments.andFlag)?' AND ':' OR ';
			}
		}
		return sql;
	</cfscript>
</cffunction>

Now if your like me, you look at this code and think “How on earth do I add another table easily and safely?”. Well you have to add a new function like “jediSearch” and then add an extra if/else into the loop in galacticSearch. Personally I’d rather not do that as it’s kind of messy and galacticSearch isn’t really the generic function I’d like it to be. Also when you edit like this you risk breaking something already working and increasing development time.

So next we move onto my solution in Pseudo-Javascript. Things of note are that we have changed the galacticSearch function to also take a columnsFunction that takes a keyword and returns the WHERE clause SQL for searching a tables columns for one keyword.

searchJedi = (keywords, andFlag = true) ->
	return galacticSearch keywords, 'jedi', andFlag, (keyword) ->
		return "(name = '#{ keyword }' OR planet = '#{ keyword }' OR lightsaber_colour = '#{ keyword }')"

searchSith = (keywords, andFlag = true) ->
	return galacticSearch keywords, 'sith', andFlag, (keyword) ->
		return "(name = '#{ keyword }' OR catch_phrase = '#{ keyword }' OR teacher = '#{ keyword }')"

galacticSearch = (keywords, andFlag = true, table, columnsFunction) ->
	sql = 'SELECT * FROM #{ table } WHERE '
	keys = keywords.split(' ')
	for i, key in keys
		sql += (if i gt 0 then (andFlag)?' AND ':' OR ' ELSE '') + columnsFunction(key)
	return sql

I think that the code is organised much tidier in the pseudo-javascript version. All the code referring to the interpretation of the keywords is in one place and all the code about searching the tables is held in another function. This in turn means that adding another table or more complexity to your keywords is not hard and you don’t risk messing up your previous code by doing it! That I think is very cool, especially if you have to work with other people/s code.

Admittedly you *could* do something similar in Object Oriented world, if you created a “Jedi” object and a “Sith” object and then coded the galacticSearch to take an object as an argument instead of a table name, but this seems like overly complicating things. Of course there is a case somewhere where passing the object is a better approach, but for most of my coding I’d rather the anonymous function approach I used in the functional programming version.

Chime in the comments if you have an opinion – I’m fairly new to functional programming so hearing from other people who know more than me is always nice!

Close browser window after print

On inheriting a site with a print popup window – ie a print button that is supposed to open another invisible window for print formatting, print said page, then invisibly close. I encountered a bug that occurred on newer browsers in the popup javascript from this code:

this.window.print();
this.window.close();

This is expected to show the print dialog and then close the window with print formatting, but it doesn’t! Most just ignore the close() call altogether and I think IE throws some kind of error, I had a different issue in IE that I fixed afterwards so I’m not sure what happens in IE. After some searching the best solution (sans jQuery) I found is linked at the top. Making use of timers and detecting when the page has finished loading as the print() call prevents the js from processing any further so it stops the page from being counted as “ready”.

Getting Started with DeliverHQ

This week I have been setting up our internal CRM to use DeliverHQ mail service. I thought I’d chronicle the steps I had to take to set it up, as the help wasn’t all that great. (Note: I set this up on a CF server, but the web calls would be the same in any language).

Step 1: Set Up Domains.

domain_setup

First you need to authenticate the domain you want to send email from, you do this in the ‘Domain’ tab at the top left (Highlighted in the following image). You’ll click on “Create Domain“, enter in your domain name, click submit, then back on the pictured screen click on the “UNVERIFIED” link. This will cause the red text at the top to be displayed, this text gives you the details you need to give to your domain host. I just copied the entire red coloured text and sent it to them. Once they say it has been added just click on UNVERIFIED again, A green message should appear at the top in place of the red one stating that you are now verified. Once you have done this you are allowed to use the smtp settings that we will set up next. (NOTE: if you are sending everything via the API you do not need to do this step).

Step 2: Setting Up Mail Server.

There are 2 ways you can send emails, the first is using smtp settings, the second is HTTP POST calls to their API. To do either you have to set up a virtual MailServer. Click on Servers in the top right and then click on the big Green “Create New Virtual Mail Server” button on the left. In the next screen give your sever a name and hit “Create Server” – the rest are optional if you want to use them.

Step 3: Sending and receiving Mail.

Once you have created a Virtual Mail Server and opened it, you should be greeted with the following screen. I’ll leave you to explore the other stats that are available and instead focus on 2 pages; Mailboxes and Server Setup.
MailBox

If you intend on only sending mail via smtp, then you will be interested in the Server Setup tab. Use the API UID as the username and the API Key as the password then you’re all setup to send! A quick note on the From field – you have to have registered a domain (step 1) to use it in a from address, e.g. sending from system@sdevgame.com would require me to authenticate sdevgame.com in step 1.

If you want to send emails VIA HTTP post, look no further than their Send API page.

The real awesome part of the application comes in the form of receiving emails via HTTP post calls. First we would need to setup a virtual Mailbox in the Mailboxes tab. Doing this is fairly simple, just enter in the name for the mailbox, the address (if you are receiving email via the smtp server – this requires setup of MX records to direct mail to the DeliverHQ smtp server) and what to do with the email when it is received. The address is optional as you can just forward emails from an externally hosted email account to the unique deliverHQ email account that is shown once you have created the Mailbox. The rest of the work is up to you on your server, check out their Receive API page for more details on the data received from the HTTP call.

Some additional notes on the Receive API that they haven’t had mentioned is the attachments array, it’s format is as follows: [[“file name”,”image-type”,(some numeric identifier),”URL to download from the deliverHQ server”,”cid number, if it’s embedded”]], an example is: [[“small_pic.png”,”image/png”,16526,”https://something.deliverhq.com/blah/file/0″%5D%5D

Progress Bar as Submit Button

This is an effect I came across a while ago, it’s a neat way of displaying how many required fields have been filled out in a form. It’s not a necessary implementation but a nice bit of UX design. For an example see here: https://www.panic.com/transmit/buy.html (And if you run a Mac their software is some of the best Dev tools I’ve seen so far).

Partial order

Partially Completed Order

Completed Order

A fully filled out order form

So I worked myself up an AngularJS directive, you can see it in action below, just as a whim – it works automatically by dynamically figuring out which elements need to be filled out and which haven’t been filled out. It took a bit to fiddle through the form controller but in the end it’s a fairly elegant solution. Though I wouldn’t recommend using it excessively large forms due to the overhead that may incur. Enjoy!