Nice Random Colors in Javascript

I needed to generate random colours for series in a chart, so my initial start was generating a random RGB hex string. However, this resulted in 2 problems:

  1. RGB definitions seem to skew dark, and
  2. No guarantee that similar shades wouldn’t be chosen

To solve 1, instead of using RGB I used HSL. This allows you to fix the Saturation and Light, and just change the Hue (a value between 0-360), meaning the colours can be set to be a bit lighter.

For 2, since the HSL definition automatically takes the modulo of the value passed through, if we are able to find a suitable value we can just increment it by this each time and generate colours that are different enough.

So we have the following code:

var hue = 0;

function getRandomishColor() {
     hue += 222.5;
     return 'hsla(' + hue + ', 75%, 50%, 0.5)';
}
Advertisements

Ordinal Indicator/Suffix for numbers in Javascript

Input | Output

1 => 1st
2 => 2nd
3 => 3rd
4 => 4th
0 => Not Placed
21 => 21st
etc…


function ordinalSuffixGen(inputVal) {
var mod10 = inputVal % 10,
mod100 = inputVal % 100;
if (inputVal <= 0) {
return "Not placed";
}
if (mod10 == 1 && mod100 != 11) {
return inputVal + "st";
}
if (mod10 == 2 && mod100 != 12) {
return inputVal + "nd";
}
if (mod10 == 3 && mod100 != 13) {
return inputVal + "rd";
}
return inputVal + "th";
}

ES2015 (ES6) Template Strings

Example: https://jsfiddle.net/ehdgpvyb/

ES2015 provides a better way to use variables inside strings.


function exampleJS5( name , age ) {
console.log("Hello " + name + ", you are " + age + "!");
}

function exampleJS6( name , age ) {
console.log(`Hello ${name}, you are ${age}!`);
}

exampleJS5('Bob', 20);
//Hello Bob, you are 20!
exampleJS6('Bob', 20);
//Hello Bob, you are 20!

ES2015 (Es6) Default Parameters Syntax

Example: https://jsfiddle.net/pkygohf3/

ES2015 provides a good way to define default parameters in functions.


function example( x = 2 ) {
 console.log(x);
}
example(5);
// 5
example();
// 2

In this example, if the argument of ‘x’ is not passed to the function, it falls back to the default value of ‘2’.


function objExample1( x ) {
 console.log(x.length);
}
function objExample2( x = [] ) {
 console.log(x.length);
}
objExample1();
// Cannot read property 'length' of undefined
objExample1(['test']);
// 1
objExample2();
// 0
objExample2(['test']);
// 1

You can see here that the built in Array.length() function is failing in objExample1 as it trying to call it on ‘undefined’ argument. objExample2 fixes this by using the ES2015 default syntax as the function parameter.

This is more powerful with default objects:


const $initSetup = {
width: 400,
height: 200,
background: 'blue'
}

function defaultTest({
width = $initSetup.width,
height = $initSetup.height,
background = $initSetup.background
} = $initSetup) {

console.log(`'${width} x ${height}' with background: ${background}.`);

};

let $userSetup = {
width: 250,
background: 'red'
}

defaultTest();
//'400 x 200' with background: blue.
defaultTest($userSetup);
//'250 x 200' with background: red.

 

 

Review: Ajax POST to C# WebMethod

[WebMethod]
public static void testingWebMethod(Object dataTest)
{
Debug.WriteLine(dataTest);

Debug.WriteLine(dataTest);
}

 

var sendThisData = JSON.stringify({
dataTest: [{ "name": "foo" }]
});
$.ajax({
type: "POST",
url: "page.aspx/testingWebMethod",
data: sendThisData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
},
error: function () {
alert("Something went wrong.");
}
});