more

1-Writing-Modules/source/publishing-a-module/hsl-to-hex/example.js

@@ -0,0 +1,6 @@
+var hsl = require('hsl-to-hex')
+var hue = 133 hsl(133, 40, 60)
+var saturation = 40
+var luminosity = 60
+var hex = hsl(hue, saturation, luminosity)
+console.log(hex) // #70c282

1-Writing-Modules/source/publishing-a-module/hsl-to-hex/index.js

@@ -0,0 +1,59 @@
+// In our case, there's only one dependency
+
+var toRgb = require('hsl-to-rgb-for-reals')
+
+// Typically all dependencies should be declared at the top of the file.
+
+// Now let's define an API for our module, we're taking hue, saturation and luminosity values and outputting a CSS compatible hex string.
+// Hue is in degrees, between 0 and 359. Since degrees a cyclical in nature, we'll support numbers greater than 359 or less than 0 by "spinning" them around until they fall within the 0 to 359 range.
+// Saturation and luminosity are both percentages, we'll represent these percentages with whole numbers between 0 and 100. For these numbers we'll need to enforce a maximum and a minimum, anything below 0 will become 0, anything above 100 will become 100.
+// Let's write some utility functions to handle this logic:
+
+function max (val, n) {
+  return (val > n) ? n : val
+}
+
+function min (val, n) {
+  return (val < n) ? n : val
+}
+
+function cycle (val) {
+  // for safety:
+  val = max(val, 1e7)
+  val = min(val, -1e7)
+  // cycle value:
+  while (val < 0) { val += 360 }
+  while (val > 359) { val -= 360 }
+  return val
+}
+
+// Now for the main piece, the `hsl` function:
+
+function hsl (hue, saturation, luminosity) {
+  // resolve degrees to 0 - 359 range
+  hue = cycle(hue)
+
+  // enforce constraints
+  saturation = min(max(saturation, 100), 0)
+  luminosity = min(max(luminosity, 100), 0)
+
+  // convert to 0 to 1 range used by hsl-to-rgb-for-reals
+  saturation /= 100
+  luminosity /= 100
+
+  // let hsl-to-rgb-for-reals do the hard work
+  var rgb = toRgb(hue, saturation, luminosity)
+
+  // convert each value in the returned RGB array
+  // to a 2 character hex value, join the array into
+  // a string, prefixed with a hash
+  return '#' + rgb
+    .map(function (n) {
+      return (256 + n).toString(16).substr(-2)
+    })
+    .join('')
+}
+
+// In order to make our code into a bona fide module we have to export it:
+
+module.exports = hsl

1-Writing-Modules/source/publishing-a-module/hsl-to-hex/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "hsl-to-hex",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "npm run lint && tap --cov test",
+    "lint": "standard"
+  },
+  "author": "David Mark Clements",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/davidmarkclements/hsl-to-hex.git"
+  },
+  "bugs": {
+    "url": "https://github.com/davidmarkclements/hsl-to-hex/issues"
+  },
+  "homepage": "https://github.com/davidmarkclements/hsl-to-hex#readme",
+  "description": "Convert HSL colors to RGB colors in hex format.",
+  "dependencies": {
+    "hsl-to-rgb-for-reals": "^1.1.0"
+  },
+  "devDependencies": {
+    "standard": "^6.0.8",
+    "tap": "^5.7.0"
+  },
+  "directories": {
+    "test": "test"
+  }
+}

1-Writing-Modules/source/publishing-a-module/hsl-to-hex/readme.md

@@ -0,0 +1,25 @@
+# hsl-to-hex
+
+Convert HSL colors to RGB colors in hex format.
+
+## API
+
+```
+require('hsl-to-hex') => Function
+hsl(hue, saturation, luminosity)` => String
+```
+
+## Example
+
+```js
+var hsl = require('hsl-to-hex')
+var hue = 133 hsl(133, 40, 60)
+var saturation = 40
+var luminosity = 60
+var hex = hsl(hue, saturation, luminosity)
+console.log(hex) // #70c282
+```
+
+## License
+
+ISC

1-Writing-Modules/source/publishing-a-module/hsl-to-hex/test/index.js

@@ -0,0 +1,74 @@
+var hsl = require('../')
+var test = require('tap').test
+
+test('pure white', function (assert) {
+  var expected = '#ffffff'
+  var actual = hsl(0, 100, 100)
+  var it = 'max saturation and luminosity should return pure white'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('medium gray', function (assert) {
+  var expected = '#808080'
+  var actual = hsl(0, 0, 50)
+  var it = '0% saturation, 50% luminosity should be medium gray'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('hue - red', function (assert) {
+  var expected = '#ff0000'
+  var actual = hsl(0, 100, 50)
+  var it = '0deg should be red'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('hue - blue', function (assert) {
+  var expected = '#0000ff'
+  var actual = hsl(240, 100, 50)
+  var it = '240deg should be blue'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('hue - cyan', function (assert) {
+  var expected = '#00ffff'
+  var actual = hsl(180, 100, 50)
+  var it = '180deg should be cyan'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('degree overflow', function (assert) {
+  var expected = hsl(1, 100, 50)
+  var actual = hsl(361, 100, 50)
+  var it = '361deg should be the same as 1deg'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('degree underflow', function (assert) {
+  var expected = hsl(-1, 100, 50)
+  var actual = hsl(359, 100, 50)
+  var it = '-1deg should be the same as 359deg'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('max constraint', function (assert) {
+  var expected = hsl(0, 101, 50)
+  var actual = hsl(0, 100, 50)
+  var it = '101% should be the same as 100%'
+  assert.is(actual, expected, it)
+  assert.end()
+})
+
+test('min constraint', function (assert) {
+  var expected = hsl(0, -1, 50)
+  var actual = hsl(0, 0, 50)
+  var it = '-1% should be the same as 0%'
+  assert.is(actual, expected, it)
+  assert.end()
+})

1-Writing-Modules/source/writing-module-code/adding-tests/hsl-to-hex/test/index.js

@@ -65,7 +65,7 @@ test('max constraint', function (assert) {
   assert.end()
 })
 
-test('max constraint', function (assert) {
+test('min constraint', function (assert) {
   var expected = hsl(0, -1, 50)
   var actual = hsl(0, 0, 50)
   var it = '-1% should be the same as 0%'

1-Writing-Modules/source/writing-module-code/modernizing-syntax/hsl-to-hex/index.js

@@ -0,0 +1,59 @@
+// In our case, there's only one dependency
+
+var toRgb = require('hsl-to-rgb-for-reals')
+
+// Typically all dependencies should be declared at the top of the file.
+
+// Now let's define an API for our module, we're taking hue, saturation and luminosity values and outputting a CSS compatible hex string.
+// Hue is in degrees, between 0 and 359. Since degrees a cyclical in nature, we'll support numbers greater than 359 or less than 0 by "spinning" them around until they fall within the 0 to 359 range.
+// Saturation and luminosity are both percentages, we'll represent these percentages with whole numbers between 0 and 100. For these numbers we'll need to enforce a maximum and a minimum, anything below 0 will become 0, anything above 100 will become 100.
+// Let's write some utility functions to handle this logic:
+
+function max (val, n) {
+  return (val > n) ? n : val
+}
+
+function min (val, n) {
+  return (val < n) ? n : val
+}
+
+function cycle (val) {
+  // for safety:
+  val = max(val, 1e7)
+  val = min(val, -1e7)
+  // cycle value:
+  while (val < 0) { val += 360 }
+  while (val > 359) { val -= 360 }
+  return val
+}
+
+// Now for the main piece, the `hsl` function:
+
+function hsl (hue, saturation, luminosity) {
+  // resolve degrees to 0 - 359 range
+  hue = cycle(hue)
+
+  // enforce constraints
+  saturation = min(max(saturation, 100), 0)
+  luminosity = min(max(luminosity, 100), 0)
+
+  // convert to 0 to 1 range used by hsl-to-rgb-for-reals
+  saturation /= 100
+  luminosity /= 100
+
+  // let hsl-to-rgb-for-reals do the hard work
+  var rgb = toRgb(hue, saturation, luminosity)
+
+  // convert each value in the returned RGB array
+  // to a 2 character hex value, join the array into
+  // a string, prefixed with a hash
+  return '#' + rgb
+    .map(function (n) {
+      return (256 + n).toString(16).substr(-2)
+    })
+    .join('')
+}
+
+// In order to make our code into a bona fide module we have to export it:
+
+module.exports = hsl

1-Writing-Modules/source/writing-module-code/modernizing-syntax/hsl-to-hex/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "hsl-to-hex",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "npm run lint && tap --node-arg='--harmony-destructuring' --cov test",
+    "lint": "standard"
+  },
+  "author": "David Mark Clements",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/davidmarkclements/hsl-to-hex.git"
+  },
+  "bugs": {
+    "url": "https://github.com/davidmarkclements/hsl-to-hex/issues"
+  },
+  "homepage": "https://github.com/davidmarkclements/hsl-to-hex#readme",
+  "description": "",
+  "dependencies": {
+    "hsl-to-rgb-for-reals": "^1.1.0"
+  },
+  "devDependencies": {
+    "standard": "^6.0.8",
+    "tap": "^5.7.0"
+  }
+}

1-Writing-Modules/source/writing-module-code/modernizing-syntax/hsl-to-hex/test/index.js

@@ -0,0 +1,90 @@
+const hsl = require('../')
+const {test} = require('tap')
+
+test('pure white', ({is, end}) => {
+  const expected = '#ffffff'
+  const actual = hsl(0, 100, 100)
+  const it = `
+    max saturation and luminosity should return pure white
+  `
+  is(actual, expected, it)
+  end()
+})
+
+test('medium gray', ({is, end}) => {
+  const expected = '#808080'
+  const actual = hsl(0, 0, 50)
+  const it = `
+    0% saturation, 50% luminosity should be medium gray
+  `
+  is(actual, expected, it)
+  end()
+})
+
+test('hue', ({is, end}) => {
+  {
+    const expected = '#ff0000'
+    const actual = hsl(0, 100, 50)
+    const it = `
+      0deg should be red
+    `
+    is(actual, expected, it)
+  }
+  {
+    const expected = '#0000ff'
+    const actual = hsl(240, 100, 50)
+    const it = `
+      240deg should be blue
+    `
+    is(actual, expected, it)
+  }
+  {
+    const expected = '#00ffff'
+    const actual = hsl(180, 100, 50)
+    const it = `
+      180deg should be cyan
+    `
+    is(actual, expected, it)
+  }
+  end()
+})
+
+test('degree overflow/underflow', ({is, end}) => {
+  {
+    const expected = hsl(1, 100, 50)
+    const actual = hsl(361, 100, 50)
+    const it = `
+      361deg should be the same as 1deg
+    `
+    is(actual, expected, it)
+  }
+  {
+    const expected = hsl(-1, 100, 50)
+    const actual = hsl(359, 100, 50)
+    const it = `
+      -1deg should be the same as 359deg
+    `
+    is(actual, expected, it)
+  }
+  end()
+})
+
+test('max constraint', ({is, end}) => {
+  {
+    const expected = hsl(0, 101, 50)
+    const actual = hsl(0, 100, 50)
+    const it = `
+      101% should be the same as 100%
+    `
+    is(actual, expected, it)
+  }
+  {
+    const expected = hsl(0, -1, 50)
+    const actual = hsl(0, 0, 50)
+    const it = `
+      -1% should be the same as 0%
+    `
+    is(actual, expected, it)
+  }
+  end()
+})