Intro

I'm a JavaScripter, let's just face it. I like the CLI and UNIX tools. Which is why I like Node. This next part I'm going to turn my attention to Node for processing my color lists into one sub Set. ES, I adore you!

Preface

In my previous post Finding Unique colors in a slurry of stylesheets I slogged through several Project components. Lets say I came up with three major lists. A Core UI List with @95 unique color hexes. As well as, a few dozen unique colors on the two app components, each.

Step one

Lets say I have three final files.

  common-ui-colors.txt
admin-ui-colors.txt
client-ui-colors.txt

Each file probably has overlapping colors so I need to combine them into one. This should be eazy-peazy with my last grep command.

I'm in terminal and my PWD is the directory with each of the above files. I'm going to combine them and send the output up one directory.

The Command

  egrep -rioh '#([a-f0-9]{3}){1,2}' . | sort -u > ../combined-colors-unique.txt

NOTE: Introduced a new flag -h

Take a look at the man grep to learn -h will omit the file name headers on each line. I did this because when processing recursivly it was giving me the extraneous output.

Anatomy of the command

  egrep -rioh             //The Command with some flags
'#([a-f0-9]{3}){1,2}'   //The match expression
.                       //Process files in the current directory  
|                       //Pipe the output to sort it
sort -u                 // sort and only return uniques
>                       // stream to the file
../combined-colors.txt  // up a directory and the filename

Sample output in combined-colors.txt

  ...
#000
#000000
#0097cf
#080808
#0f0f0f
#111
#114E78
#1c94c4
#204d74
#222
#223E60
...

You can see from the sample I have some double values because of HEX and HEX-Shorthand. For comparison sake, and to get to my final subset; I need to turn these shorthands into longhands. For instance #000 should be #000000 and #12a should be translated to #1122aa. Then I can do a final sort and filter for uniqes.

The JavaScript Node Phase

Ok, folks, be kind. This is perhaps somethign which could be done in CLI, but I had fun JavaScripting it nonetheless. Also; (Semicolons cannot save you)

Returning to my terminal I open my text editor in the parent directory where I output combined-colors.txt.

I generate a ne JavaScript, lets call it ColorProcessor.js

The Variables...

I know I need Node to process a text file; put each line into an array, and I need it to process to an output text file.

  const fs = require('fs');
let outfile
let array = fs.readFileSync('combined-colors.txt').toString().split("\n")

Aside

Now I know you're thinking, why not just write a function that accepts a filename and pass it into the Node command. Because, reasons. I just wanted to get this done. I may come back and refactor it into a tool later if it something my team can use. I may just have Node do all the processing later if that is the case.

A fn of change and a loop

  function duplicate(str) {
  let duped = ''
  for (s in str) {
    duped += (str.charAt(s) + str.charAt(s))
  }
  return duped
}

for(i in array) {
  array[i] = array[i].substr(0,1) + array[i].substr(1).toLowerCase()
  if (array[i].length < 5) {
    array[i] = array[i].substr(0,1) + duplicate(array[i].substr(-3))
  }
}

I'm looping over the array declared in my variables. and changing each entry to lowercase first so it can be compared properly later. Then if the entry is less than 5 characters it's, in all likelyhood, a HEX-shorthand. I need to duplicate each character after the hash. The duplicate(str) is fed only the last three characters of the array item value. I instantiate a new string let duped = '' then for each character in the string I append the character twice to duped. Example f2a on the first for loop duped = 'ff' then the next round '22' ia appended and duped = 'ff22' on the last character in the loop 'aa' is appended and duped = 'ff22aa'

'ff22aa' is the string returned and assigned as the new value in the array item.

Re-sort and export

So now I have values changed to lowercase and the HEX-Shorthand mutated to HEX. I should be able to re-assign a sorted array from a subset, Yay ES introducing the Set.

The spread operator ... turns an iterable into the arguments of a function or parameter call.

The new Set([iterable]) generates an array of unique values like the bash commad 'sort -u' did in the last post.

So I pass a ...new Set(array) as the array to sort() and reassign it to the array value

  array = [...new Set(array)].sort()

Then I output each array item to the outfile with a newline '\n'.

  outfile = fs.createWriteStream('newfile.txt')
array.forEach((i) => { outfile.write(i + '\n') })
outfile.end()

All together now!

The contents of ColorProcessor.js

  const fs = require('fs');
let outfile
let array = fs.readFileSync('combined-colors-unique.txt').toString().split("\n")

function duplicate(str) {
  let duped = ''
  for (s in str) {
    duped += (str.charAt(s) + str.charAt(s))
  }
  return duped
}

for(i in array) {
  array[i] = array[i].substr(0,1) + array[i].substr(1).toLowerCase()
  if (array[i].length < 5) {
    array[i] = array[i].substr(0,1) + duplicate(array[i].substr(-3))
  }
}

array = [...new Set(array)].sort()

outfile = fs.createWriteStream('newfile.txt')
array.forEach((i) => { outfile.write(i + '\n') })
outfile.end()


Run the file through node bash node ColorProcessor.js ...and voila.

Sample of final output in newfile.txt

  #000000
#0097cf
#080808
#0f0f0f
#111111
#114e78
#1c94c4
#204d74
#222222
#223e60
...

I can compare the input and output and verify that the #000 is removed, or paired down, #111 is changed to #111111 and so forth. My final output is a success.

Sources Cited and links


323 0 0