CSS three digit hex colors

Some might consider this a micro-optimization, and there are many tools that can do this automatically at runtime, but there is often a need for developers to apply in source code and/or understand the output of automated tools.

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

Some common colors that most are familiar with:

CSS color name 6 digit hex 3 digit hex
white #ffffff #fff
red #ff0000 #f00
blue #0000ff #00f
black #000000 #000

Some more complex examples:

6 digit hex 3 digit hex
#112233 #123
#aabbcc #abc
#cccccc #ccc

NOTE: while you are at these changes, this would also be a good time to change to all lower-case to improve the compression algorithms.

REFERENCES:

Deque FireEyes accessibility testing plugin

I’ve done a lot of accessibility testing and development work over my career. One of the many free tools that I use in that role is FireEyes. Deque also has some commercial packages for developer use.

FireEyes adds a new tab on the Firebug tab bar and adds the ability to analyze a web site for WCAG 2.0 Level A and AA and Section 508 accessibility violations. The Stand-Alone version of FireEyes is a browser plugin to the FireFox browser. It requires that the FireBug plugin already be installed

Requirements:

  • Firefox 31-41

    As of 2015aug21, the current version of the extension is NOT signed and will not execute on later versions. [See my later post on this topic]

  • FireBug 2.x – Do NOT install Firebug v3 alpha as the tab will not show.

NOTE: should be on Firebug tab labeled “Worldspace Fireyes”, but does not seem to be available in Firebug3.

NOTE: if you try to download in MSIE, you must rename the .zip to .xpi, and then open with Firefox.

REFERENCES:

Colored terminal window text on Ubuntu (Linux)

After a clean install, or simply access to a new machine, I often find it helpful to enable colored prompts in the terminal/command line environment.
For standard Ubuntu / Debian / Linux environments, this only requires you to remove a comment from a single line in a config file.

In /home/%USERID%/.bashrc you will find the following text, the last line simply needs to have the hash removed:

# uncomment for a colored prompt, if the terminal has the capability; turned
# off by default to not distract the user: the focus in a terminal window
# should be on the output of commands, not on the prompt
#force_color_prompt=yes

Open vi/vim or your editor of choice and remove it and you are done!

NOTE: If you are using Nautilus, you will not see this file as it is hidden, choose “View”, “Show Hidden Files” (CTRL-H) and it should appear.

Safari/WebKit background flash on page load

I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.

Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.

The simplest fix, while not elegant, is to an explicit ‘style’ attribute on the <html> tag.

<html style=”background-color:black;”>

Reference: