This is a big week in terms of website development. While I’m not convinced there are no issues with the current state of the website, I have begun work on version 2. I spent most of the week in active investigating, experimental coding, and lots of reading.
The first subject to tackle is CSS–more specifically converting to SASS so I can use variables in design, making coding much more efficient and design much more modular and reusable.
First I had to decide how to implement SASS in a shared host environment. I studied how other themes accomplish the live re-compiling of SASS. I became convinced the most secure way to do this was using scssphp, a php library for compiling SCSS/SASS in php.
After getting this all up and running, I began to create a design and styles page inside the plugin options. I spent the entire weekend creating a color palette module that can be used to experiment and choose colors that are then written to the database.
The most impressive part of this task was how I managed to create an accessibility checker for the colors. While there are a couple libraries (Compass, Ruby-Sass) that have functions to compare contrast using luminosity, there existed none in php because of a specific function (pow) needed. However, I discovered there IS a pow function in the current version of php and it’s possible that everything I had discovered in research thus far was previous to the existence of this built-in function.
I learned that the most reliable method for contrasting colors is using luminosity, which is mathematically difficult to manipulate. However, using various publicly known equations, I was able to piece together a function that compares and suggests contrasts in real time.
This also involved extending the compiler class used in scssphp, adding various comparative functions, color-manipulation functions, as well as public functions that allow submitting colors for comparison from another function.
I also went on to create options for colors and the beginnings of typography. These options are stored in the database as well as written to .scss files on the server, from where the sass compiler can compile the css. This means I can access the design page in the options, pick new colors, and they will automatically be compiled and applied to the live site, thus allowing easy changes to the design with most of the hard work automatically handled out by code.
