Tag: CSS

Validating website HTML, CSS, and links from the command line

When working on a long running projects, it’s easy to lose track of HTML and CSS standard compliance.  Also, link rot is a common occurrence.  Gladly, there are command line tools that can be executed on a regular basis (think weekly or monthly cron jobs), that would check the site and report any issues with it.  Here is one of the ways.

Installation on Fedora:

yum install linkchecker
yum install python-tidy
yum install python-cssutils

Example command line:

linkchecker -t20 --check-html --check-css https://mamchenkov.net

Obviously, check the manual of linkchecker for more options.

Migrating Twitter Bootstrap 2.3.2 to 3.0

For those of us who are starting to look into Twitter Bootstrap 3.0  for new projects and possible migration of old projects from Twitter Bootstrap 2.3.2 to 3.0, I found a couple of good resources.   Firstly, this very brief StackOverflow discussion on what has changed between the versions.  And secondly, this really nice migration guide.

If only there was an automation tool that works for me… A few were mentioned in this StackOverflow discussion, but none did anything sensible on my projects.  I guess I’ll have to roll out my own, or use some manual labour in combination with powerful search-and-replace tools.

CSS Colorguard – keep a watchful eye on your CSS colors

CSS Colorguard – keep a watchful eye on your CSS colors.

Here is a better description from the README:

Every CSS project starts out with good intentions, but inevitably, one too many people eye-dropper colors into nooks and crannies that you never knew existed. CSS Colorguard helps you maintain the color set that you want, and warns you when colors you’ve added are too similar to ones that already exist. Naturally, it’s all configurable to your tastes.

And here is my favorite part:

Colorguard uses the CIEDE2000 algorithm to determine the similarity of each of the colors in your CSS file. This algorithm is quite complex, but is used in the broadcasting community as the best approximation of human ability to discern differences in color. RGB on the other hand, is pretty bad at representing differences in color purely based on the numerical difference of the hex values.

Luckily, someone else already implemented CIEDE2000, so I didn’t have to. Tight. Cause this thing is mathy as hell.

CIEDE2000 math

Front-end development bookmarks

Front-end development bookmarks – a huge list of frontend development resources Dmitriy Navrotskyy has collected. Sorted from general knowledge at the top to concrete problems at the bottom.