Why I ❤️ HSL more than RGB

Mandatory LCD Color Lesson

One of the first thing you learn about how pixels on LCD screens work is that almost every color you are looking at is essentially a lie, a visual trick. rgb-matrixWhen you think you see a purple colored button on a light orange background, you’re actually just seeing different concentrations of thousands of Red, Green, and Blue little lights in different strengths which mix together on the way to your eye, which interprets it as that particular hue. Yes, the LCD rainbow is rather boring.

worlds most boring rainbow
The world’s most boring rainbow

As you probably already know, we can controlling the intensity of those little red, green, and blue subpixels in CSS. In fact, we have 0–255 levels of each subpixel to play with. Yay! If you have ever used any graphic creation tool, this is all old news. If you crank red and green to level 255, you get yellow. If you do the same with red and blue, you get magenta, and blue + green make cyan. If you recognize those colors it’s because cyan, magenta and yellow are the hues of the print world. Fortunately, our eye and brain is pretty good at see things that aren’t really there.

color: rgb(0,255,255); /* cyan */
color: rgb(255,0,255); /* magenta */
color: rgb(255,255,0); /* yellow */

Okay, I digress. I think it’s great to be able to use rgb(240,13,30) to set a nice candy apple red instead of using a more obtuse hexcode like #F00D1E (though it’s fun to try to work in hex 1337sp34k into your code). It makes the color more understandable and helps you appreciate the a color is made up of different components. You can also see at glance, without needing to convert from hexadecimal what color something is. In the end, it is a welcome layer of abstraction.

RGB! What the HSL do you mean?

Although RGB is a nice abstraction, we can kick up the abstraction level up to 11 if we switch to HSL. Hue, Saturation, and Light. The HSL color model maps (mostly) to the RGB model but it is based on the classic artists’s tool, the color wheel. The Hue is a radian on the color wheel from 0–360º, the saturation is how rich that hue is, and light essentially controls how washed out that hue is.

> 100% Light will always map to RGB white #FFFFFF for every color. 0% will always map to RGB black #000000 for every color. It doesn’t matter what hue or saturation you choose, no light means no color, just like in real life.

This control is really useful when you’re basing a design off of a logo. If there is a specific hue of green in your logo, you can easily get lighter and darker versions of that color. Couple that with the triad or complementary colors on a color wheel and you are you on your way to a harmonious color pallette, using only arithmetic, letting the computer do the calculating.

NOTE: RGB technically has more color fidelity than HSL. On a 24-bit (2²⁴)LCD display, RGB allows us to have 16,777,216 different colors (256 × 256 × 256). HSL only allows 3,492,722 different values (360 × 99 × 98 + black +  white). In real-world CSS, this loss of fidelity doesn’t really matter but it’s a good topic to bring up as CSS nerd cocktail parties.

Constructing an error message

How about a real-world example. Let’s say you want an error message like this:

Oops, you made an error, can you re-read the instruction manual and try again?

Doing something like that is EASY with HSL. IN this case, I just chose hue #5 ( out of 360 ) as my base color and I end up with CSS like this:

background: hsl(5, 100%, 92%);
border: 2px solid hsl(5,100%,30%);
color: hsl(5, 66%, 16%);

padding: 1em;
border-radius: 5px;

Once I choose the hue of the background to be a 100% saturated red #5 with lightness of 92%, I simply bring down the Light value to 30% for my border and drop the saturation and Light for my text. Let’s compare that to what those color values would look like in RGB:

background: #ffdad6border: 2px solid #990d00;
color: #44120e;

I’m sure you’ll agree that the HSL values are WAY easier to manipulate and mess around with. As an added bonus, the color picker in Chrome’s development tools will stick to a specific hue, so it’s easy to pick a color in real time.

HSL is a fantastic addition to CSS and now that every browser supports it, why not try it out on your next project?

From C# to PHP and WordPress ( Part 2 : The Syntax )

PHP: Get serious?

PHP is quirky. It’s that odd cousin that no one really admits to being related to (Sorry cousin Rupert). It’s also very simple. It’s interpreted, not compiled, it’s got non-serious function names like implode and as a result, some think it’s not serious.

Okay most people don’t think PHP isn’t a serious language, after all it runs LOTS of the internet, but coming from C#, PHP has a certain quaintness about it. It feels like it’s not serious enough, that it’s too lax in its syntax and there aren’t enough protections around it. PHP documentation (that place where fun people like taxonomists and archivists hang out) is actually almost fun to read! Terms like needle and haystack are used when talking about search inside strings and arrays.

The result is a mixture of approachableness (not a word) and inconsistency. It doesn’t always get it right, but with enough time and looking for examples ( too many, actually ) the language eventually makes sense… sort of.

PHP documentation is almost fun to read! Terms like needle and haystack are used when talking about search strings inside strings and arrays.

One of the things that is annoying about PHP is that there is often too many ways to do something. While this freedom may seem less stifling and a boon to open acceptance, it actually ends up being painful to learn, and easy to screw up.

If PHP is English, C# is Japanese

php-c-sharp-languagesWhen I was learning Japanese I loved the fact that every single verb conjugated into the past tense in exactly the same way. Essentially, you chop off the end and add ~ました or ~た and you’re done. It was orderly, it followed the rules and there were few exceptions. Sure, you had to commit the characters to memory if you had to write Japanese, but using the language in conversation was surprisingly easy.

There were only 60 or so sounds in the whole language ( compared to the hundreds of variations in English ) and for the most part, they were all rather simple sounds. It’s not a tonal language and there are no stress points required when learning a word. Compare that to English which sort of has the ~ed suffix to conjugate a word into the past tense… but is pretty much is a language of exceptions like went , ate lived, sought, came, could, awoke, withdrew, etc. You pretty much just have to memorize the conjugations.

Echo, echo, echo

it’s It’s kind of cool to use echo. After all, echoes are FUN. Who doesn’t like to yell stuff out while hiking into a canyon to hear the canyon walls recursively call it back to you?

echo-echo-echoThe inconsistency in English is a lot like PHP. PHP function names and keywords are kind of a mixed bag. In one hand, you get to use functions that have cute names like echo and implode and chop and chunk_split which you have to commit to memory. (I mean… echo outputs my data to the screen? Shouldn’t that be a recursive function or something?) Instead of echo you expect some word like output or write or print  would be used. But, nope… someone chose echo and it IS kind of cool to use echo. After all, echoes are FUN. Who doesn’t like to yell stuff out while hiking into a canyon to hear the canyon walls recursively call it back to you? Wait… maybe it is a good function name for recursion.

Structure and sense, rules and regs

C#, like Japanese, PHP is more structured. Instead of echo we have Response.Write. Instead of implode and chop we have the clearly named String.Join and String.Trim. In addition, you can just attach these methods right to your variables (which is how they’re usually used). If you have a string called emailAddr you can just write emailAddr.Trim() which performs the action on the string. You suffix the action (the verb) to the end of the variable (the noun).

The method names in C# clearly define their purpose. They belong to the string class. They modify strings. The syntax in C# is consistent, easy to remember, and easy to discover. The syntax follows a specific set of rules. There’s a lot to like.

But with rules comes restrictions. You can’t for example, just pass anything anywhere. If a method wants a String object as a parameter, you can’t just send it an array, or a character, or a number. You can’t even really send it a Char object. If a parameter in a PHP function wants a number, you can send it anything and it will just try to convert it in many cases.

In C#, types are checked and they are enforced. While this restriction may seem limiting, in practice having the freedom to have a variable be anything at anytime in PHP ends up causing more hard to track bugs. It took some getting used to this in PHP and you end up spending more time in the documentation, for better or for worse. It does force you to keeping your code style consistent, but it can be frustrating when tracing bugs. It IS easier to get PHP up and running and it’s definitely a simpler, more forgiving language and framework that’s easier to understand. And perhaps that’s why, like English, it’s been adopted. For all its warts, it’s easy to learn. It’s only when you get to larger projects where structure is important. Something that C# enforces from the get-go. For the record, I think it’s weird using . to concatenate strings together. I think the ampersand & may have been a better choice had it been easier to type on a keyboard.

So, that just scratches the surface of the syntax challenges that I had when going from C# to PHP. There’s a whole lot more, but this article is long enough. In a future article… I’ll talk about View Engines. Razor, ASP.Net Webforms, PHP, etc.

Moving from C# to PHP/WordPress (Part 1: The Tools)

Coming from a C# background, moving from an elegant strongly-typed powerful language like C# to a mish-mash feels-like-its-cobbled-together language like PHP was both frustrating and liberating. And the hardest part wasn’t even the syntax. It was tools.

A couple of years ago my new boss said to our team. “Hey team. I like WordPress. I want to switch our sites to WordPress. Look into it for me.”

At the time we used a combination of home grown CMS built on the .Net platform and Composite C1, an open source CMS I chose based on .Net. We’d been considering different options for new a new CMS as we’d been having problems with Composite C1 and product data coming in from internal systems. Oh, and they used to use XSLT as the template engine on the back end. Oh the pain! XSLT templates are essentially what happens when XML and a W3C standards compiler decide to have a baby. To be fair they switched over to the Razor engine, which is a really expressive syntax to write. And I actually loved learning XSLT as it gave an interesting perspective on pure functional programming, but I’ll leave that discussion for another day.

XSLT templates are what happens when XML and a W3C standards compiler have sex.

We had been dabbling with other platforms like DotNetNuke, Orchard CMS and maybe even switching to another platform like Ruby on Rails, but I had not had many good things to say about the limited exposure to PHP that I had.

But, ever the optimist, I looked into it and a few days later replied with something like: “Okay, we can do it. but… I need a new Computer. I’ll need a MacBook Pro. Most webdevs doing PHP use Macs.”

macbookOkay, fine. I wanted a new shiny computer. But hey, some tools are exclusively Mac (or
were). Oh, and my Lenovo T410 was getting long in the tooth and didn’t hold a charge. Don’t judge me.

I got my new machine.

And so it begins…

And so began my journey. New computer MacBook, new language PHP, new CMS WordPress, a new OS. New everything.

Coming from a C# background, moving from an elegant strongly-typed powerful language like C# to a mish-mash feels-like-its-cobbled-together language like PHP was both frustrating and liberating. And the hardest part wasn’t even the syntax. It was tools. Before I go one, bear in mind that these are my opinions based on my experiences. It’s perfectly valid to have your own opinions, and if you feel differently, please let me know so I can ignore them. ( Alas, I jest )

One tool to rule them all

In C# and .Net you really didn’t need to search for your tools. There was pretty much exactly ONE choice of IDE ( Visual Studio ) and you just needed to learn the ins and outs of working with it. That came with some considerable Pros (and some cons). First of all, .Net C# tutorials were focused. Less time is focused on syntax and multiple ways to do something or set something up and more time is spent on design patterns. I think this is a strength of the .Net platform. You spend less time troubleshooting tools that don’t play nice with each other and more time learning code patterns.

But .Net strengths can be its weakness

Although it’s true that you typically spend less time getting tools to work properly, there is one side-effect of this. You can easily get lazy. You can rely more on the tool than the knowledge of what you need to know. I’ll get into that in a later post, but if you want a preview, just look up “ViewState and ASP.Net Webforms engine” in your search engine of choice. Although not a popular tool any more, it was the anti-web platform. They tried to  abstract the web and it didn’t turn out well.

Support the troops!

With .Net you know you’re going to get lots of support and well-written tutorials and good documentation. After all a massive company pays people to do these things. They need to train an army of corporate developers to stay within the gated community of the .Net world.

Say what you will, Microsoft supports their developers
Say what you will about them, but Microsoft supports their developers

Sure, there were always outliers pushing the boundaries of what Visual Studio can do. There are those who use C# outside of Visual Studio as well… but the majority stay in the Microsoft stable and use the Microsoft tools. It’s like meeting that rare iOS developer who develops iPhone apps on a Linux box and just uses XCode to compile the project. When you meet that person you either think they’re a serious h4xx0r who deserves your respect, or you think… awww that’s quaint.

Anyhow, there aren’t many that leave the confines of Visual Studio. But Visual Studio is actually a really nice IDE that does a lot for you, so it’s all good. I hear a rumor that some illustrators don’t use Adobe Illustrator as well.

PHP has no tools…

Let me qualify that. PHP doesn’t have any go-to tool ecosystem, IDE or build systems. All the vertical integration is gone. You have to find all your tools and there’s no PHP section at your local Home Depot to help you out! There isn’t one massive IDE that everyone uses and people are VERY opinionated their tools.

The closest thing you can get to a universal tool for PHP is ‘a keyboard’.

Let’s compare that to other big languages. Java has IDEs like NetBeans or Eclipse, Microsoft has Visual Studio, Apple devs use XCode. But developer who write in PHP… and even WordPress developers (an opinionated CMS) has no universally accepted set of tools. The closest thing you can get to a universal tool for PHP is ‘a keyboard’. Developers use everything from PHPStorm to Dreamweaver to NotePad to SublimeText to vi. Yes, people use vim as a PHP IDE. As crazy as that sounds.

I choose YOU, Pikachu! No wait…

For a new developer ( with an ENTP personality ) the sea of choices that PHP gives you can be debilitating. As such, I’d just recommend finding a blog that you like, and use what they use. Ask them, they’re usually pretty friendly. I followed Chris Coyier of CSS-Tricks.com at the time, so I use SublimeText… though I miss debugging tools and for my more complex projects I’m thinking of something more full-featured like PHPStorm.

Making a PHP build system work can be like putting LEGO blocks together, except some of them are MegaBlocks… and some of them are Jenga blocks

As such, PHP can be extremely frustrating, especially when had the power in a single IDE to do ALL the things for you. If you want to auto-deploy a site, push to source control, compile your SCSS, use SVGs in your code, check your code for errors, FTP your files, and debug… you can do that.

In PHP, you may have to use a different tool for EACH of those processes, and the first step is figuring out what tools are out there!

LEGO solved the Jenga problem. With LEGO.
LEGO solved the Jenga problem. With LEGO.

Sure, there task runners like Grunt and Gulp and Yeoman and bower and homebrew and… ( too many choices!!! ) that help, but which one do you choose? When do you use them? And WHY is it returning this ESOTERIC error that’s only function that’s only purpose is to tell me it didn’t work and that I should read the log, which is… hey, where’s the log? Making a PHP build system work can be like putting LEGO blocks together, except some of them are MegaBlocks, some of them are Duplo blocks and some of them are Jenga blocks. It can be frustrating.

But it is also very liberating. It forces you to learn the command line tools and you feel like a wizard when you’re spitting things onto the command and have the ability to understand what the error means (or more often, what it doesn’t mean).  Sure, sometimes choosing a tool can be a frustrating experience and sometimes it feels like a huge timesuck going down a path to learn that this other tool is what you REALLY should have used, but it teaches you valuable problem solving skills.

But it wasn’t just tools I found frustratingly liberating™, but it was also that syntax. PHP is weird, immature, playful and welcoming. I’ll reserve my next post for talking about PHP’s syntax.