Blog

It’s been 4 weeks since the last blog post and we've been busy again.  

I've completed two projects over that period in between pluralsight sessions in preparation for my first run at a Microsoft Exam.  A Wordsearch generator and a neat little colour picker.

It might be easier to talk about the colour picker first.  A colour picker is normally a little UI tool that will let you change the red, blue and green values to create colours of your choosing.  Other colour pickers offer some really in-depth functionality and might work natively with Hue, Saturation and Luminance settings.

My own colour picker operates by letting the user adjust four input boxes.  A box for the red value.  A box for the green value.  A box for the Blue value and a final box for the Alpha value.  Alpha is a measurement of a colour’s transparency.  By using the “onchange()” event listener on each of these inputs I could run a “mother” function in JavaScript.  This function would take the values of each of these boxes and print out a “rgba()” value that could then be applied to a preview box.  Then it would print out a text equivalent of the code.

So after putting in your colour values and liking the preview, you get a little printout that will allow you to copy and paste the code for that colour into your work.  However not everyone wants to work in “rgba()”.  Some people like to use Hex values.  A Hex value is a hash followed by six characters.  These will express a value between 0-255 using a base-16 numerical system.  The Hexadecimal digits runs from 0 to 15 because we cannot use 10-15, those being base-10 expressions, we instead use A to F.  To convert the RGB value to a Hexadecimal value I had to use a function that divides the total value of each RGB value by 16 and rounding down to get the prefix 0-F.  Then I would take the equivalent of each number bracket and subtract it from the original value.  The remainder value was then converted to Hexadecimal and put together to make the Hexadecimal equivalent of the original number.

The last thing to convert my RGBA value to was the HSLA output.  This involved a lot of complicated maths that I could never do mentally but using JavaScript I was able to knock out in a short function.  There was a whole bunch of finding the highest value and subtracting the lowest value and then dividing it by 100 to get a Saturation value and some such thing.  It was awful and if you use HSLA I worry for your health.

I made a big deal of going over my code.  Optimising things, making it so as much of it was as reusable as possible.  It still resembles spaghetti code in place but more or less it works as well as it can within the scope of being a colour picker.

As fun as talking about colour pickers are the real challenge of the month was given to me and Joe by Tony "Create a Wordsearch generator".

At this point I’d like throw out a huge gush of love to the people behind jQuery.  This project was the first time I’d used it and it made the unholy task of creating, selecting and manipulating DOM elements relatively simple.

First things first.  This Wordsearch had to respond to several user inputs.  The user was able to choose the Title, the size of the grid (with independent height and width values), Minimum and Maximum word length as well as the percentage of words that would be reversed.

Shortly after starting I got my first taste of AJAX, which consisted entirely of grabbing the entirety of a dictionary file and slapping it into the page as a dictionary to draw words from.  Then loading that long div of text into a JS string, then splitting it on line breaks.  Resulting in an array of 78000 words.  After that I pushed every array index that contained only alphabetical characters (No apostrophes, hyphens or derivative characters) into another array.

What followed was writing functions to skim out words that were too long or too short based on user input.  Another function to randomly select a word and then split it into one array of each of its characters.

After sorting out the word selecting code.  I moved on to creating a HTML table, using user input to add table rows to match the value of height and each table row had table data elements created to match the value of width.  Every single one of those table data elements was created with a class of “.tableData”.  This would be important straight after.

Now that I had an array of words and a table to print the words into.  I just had to work out how to do it.  Thankfully I could use that “.tableData” class to utilise a jQuery selector and use another random array value function to get my Point of Origin within the table.  Then I wrote a nice little function that randomly selected a value between 0-3, I decided on having 0 being a horizontal word, 1 being vertical, 2 being downward right or upward left and 3 being upward right or downward left.

What followed was 4 probing functions, the purpose was to pass the length of word into the probing function and it would go forward, it would then check the elements it selected (thank you jQuery) for undefined values (where it had tried to select a non-existent table data element) or for a table data that contained anything already (where previous words had been printed)

Once a probing function had returned true the writer function would print the character from that word array into the respective table data.  This resulted in a word print into the grid correctly.  JavaScript has many excellent inbuilt functions to reverse arrays.  Which is what I applied to the correct number of words based on user input.

The number of words was something the user has no control over, this is to stop users creating a grid with 64 spaces for characters and asking for 89 words.  The formula takes into account grid size, minimum and maximum word lengths.  It means each word search has a sufficient amount of words.

The last thing to do was to create a function to fill the remaining, empty table data elements with random characters.  As well as some minor tweaks to optionally highlight the answers, hide the input menus and make the page ready to print were.

It’s a good thing that I am beginning to get better at breaking down problems into parts I can tackle, then taking the solution from each tackled obstacle and snowballing them into one final solution to the initial problem.  To create a wordsearch generator I had to jump through some hoops.  Each time I jump through one I better understand how to get things to work best. 

It's starting to dawn on me the sheer scope of the development world. It's on me to push forward with learning as much as I can.