Month: February 2015

Creating a periodic array of dates in JavaScript

Marky Roden JavaScript

So I am lazy – nothing new there. I am also a manager (nothing new there either unfortunately) and I track hours in a spreadsheet. Yes we have a proper system for hours tracking and billing but I am old school and I prefer the layout I created and have used for yeeeears.

Anyway, so it is new project time and I need to create a set of dates from this Friday – every Friday out through the next 3 months. I am sure there is a smart way to do that in Excel but I wanted to do it in JavaScript – ‘cos I can, and ‘cos I want to keep kidding myself I am a developer 😉

A quick Google search found this snippet which is almost what I was looking for http://stackoverflow.com/a/4413721/1171653 (look at the example)

I modified the sample code slightly to return the format I was looking for – starting today – 02/26/2015

Date.prototype.addDays = function(days) {
    var dat = new Date(this.valueOf())
    dat.setDate(dat.getDate() + days);
    return dat;
}

function getDates(startDate, stopDate) {
    var dateArray = new Array();
    var currentDate = startDate;
    while (currentDate <= stopDate) {
        var day = currentDate.getDate()
        var month = currentDate.getMonth()+1
        var year = currentDate.getFullYear()
        dateArray.push(day+"/"+month+"/"+year )
        currentDate = currentDate.addDays(7);
    }
    return dateArray;
}

var dateArray = getDates((new Date()).addDays(2), (new Date()).addDays(90));

console.log(dateArray)

Loaded it into the firebug console and produced the following which is easily copy/pasteable into Excel

[“28/2/2015”, “7/3/2015”, “14/3/2015”, “21/3/2015”, “28/3/2015”, “4/4/2015”, “11/4/2015”, “18/4/2015”, “25/4/2015”, “2/5/2015”, “9/5/2015”, “16/5/2015”, “23/5/2015”]

It took me longer to write this up on the blog than do it.

But now I have a reference point so that when I need it for the next project I can come and get this code 🙂

Lazy 🙂

Creating your own sample Bluemix application – a NotesIn9 presentation

Marky Roden Bluemix, NotesIn9, Watson Service

I created a Notesin9.com video for the purpose of demonstrating how quickly and easily you can repeat one of the IBM example applications for yourself. In just over 10 minutes you can deploy a new Bluemix hosted Text To Speech example using the Watson Text To Speech service which is reeeeeally cool 🙂

Watch the video here

In the near future I am going to do another NotesIn9 on how to integrate that service into an XPages application.

Whenever IBM gets round to putting XPages into Bluemix *coughs* Pete *coughs*  this is going to be so much fun

 

😉

 

 

Using CSS3 border-radius to round a Bootstrap button

Marky Roden Bootstrap, CSS

This is a really simple observation, but relevant to the side project I have started to work on for my wife (more to come later)

If we create a simple Bootstrap button

b1

<button type="button" class="btn btn-default">Single toggle</button>

It looks something like this in firebug

b2

Looking at the .btn style on the right we can see border-radius: 4px

Messing with this value can create a much more rounded button – if that is your desire

b3

This is border-radius: 20px – Cool 🙂

 

Mobile web app usability tip: Selecting all text when clicking on an input field

Marky Roden iOS, Usability

I am working on a single page mobile only web app where someone needs to just update numbers, easily and quickly.

I found during some usability testing that having to tap into a field then tap to the end of the field and then start to add the numbers was way too much like hard work.

So I decided that when tapping into the field the whole field should be selected and with the type=tel number pad coming up the user can start to the immediately. Yes this destroys what was typed but to update a 3 digit number is easy and seemed to me to be a lot easier than having to edit an existing number.

You can see the example I created at this link – http://demo.xomino.com/xomino/gstracker.nsf/xHighlightExample.xsp – open it on a mobile for the real effect. The sad face fields do not have the select all the Highlight does. This is only tested iOS 8 – if it doesn’t work for you I would love to know and what device/OS.

highlight
To do this I had to google how to selectAll on a phone and ran in the problem that Mark Leusink mentioned during our talk at ConnectED. On a mobile device there is a 300ms delay after a focus or click event to ensure that the user is not zooming or scrolling. Makes sense. But it means that if you try and attach anything to the focus event the timing can be all a screwed up. Looking through StackOverflow I found the following code which forces a wait on the event and ensures the timing works. Without the timeout the selectAll does not work.

This is the code I used to make the effect work

$('.highlighter').on('click', function(){
	$(this)[0].setSelectionRange(0, 9999);
})

 

and this is the SO answer where I got the solution from.

http://stackoverflow.com/questions/3272089/programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari

 

Dynamically changing form labels into placeholders for mobile devices

Marky Roden Bootstrap, CSS, PSC, XPages

When building a mobile interface with bootstrap, one design option is to use placeholders to signify the field label.

a1

This approach has many critics who questions the page accessibility, the fact that when you click into the field and start typing you lose the context, and so on. It is however an approach which is frequently used. In this article I wanted to show how I made the PSC contest submission form go from “Labels” to “placeholders” using media queries.

Labels

Looking at the form normally we see labels and fields

a2

If we have Labels and placeholders together at the same time, the effect is not really all that pleasing to the eye

a3

As the screen size is reduced the bootstrap styling kicks in around the Galaxy Note 4 size

a4

But when we get to the phone size screen the labels are removed and the the placeholders are made visible.

a5

 

If you go the https://contest.psclistens.com site you can play with it yourself by resizing the page

How does that work then?

The labels are easy – they are hidden with a media query

@media screen and (max-width: 460px), screen and (max-device-width: 460px){
	label:not(.projectSponsor) {
		display: none !important;
	}
}

The placeholders are not so easy though. The first problem is that the “placeholder” attribute does not have a CSS value to “display:none”. The second is that they are as yet not governed by a non-vendor prefixed style. Although you cannot hide the placeholders you can color them.

The code below is a media query which basically says that when the screen is above 768 pixels then the placeholders get a style color of white. I had to !important then to get it to override bootstrap properly. When the screen gets smaller the white override is lost and the bootstrap grey is seen.

	@media (min-width: 768px) {
		.form-control::-moz-placeholder {
		    color: white !important;
		    opacity: 1;
		}
		.form-control::-moz-placeholder {
		    color: white  !important;
		    opacity: 1;
		}
		*::-moz-placeholder {
		    color: white !important;
		}
		.::-webkit-input-placeholder {
		    color: white !important;
		    opacity: 1;
		}
		::-webkit-input-placeholder {
		    color: white  !important;
		    opacity: 1;
		}
		*::-webkit-input-placeholder {
		    color: white !important;
		}

	}

 

So the labels are hidden at 460 but the placeholder is displayed at 768 – so yes if you watch carefully as the screen is reduced you will see a screen size between the iPad and the phone where both are visible. This was done for effect so that you can see it happen.

Conclusion

Without going into the merits of whether or not this is an appropriate design method for displaying information to users, this served as a nice example of what is possible. This was all done within the context of an XPage.

Check it out – https://contest.psclistens.com