“The Modern Web” by Peter Gasston; No Starch Press

As the pace of change in the Web domain keeps accelerating, working Web developers, all of us but especially freelancers, struggle with finding the time to: 1) work; and 2) not get too far behind the technology curve.

This book was written to help with that struggle:

[T]his book is a snapshot of current, new, and near-future features in HTML, CSS, JavaScript, and related technologies, with a bias toward those that are best for building sites in the multi-device world.

The book begins by describing stuff that’s in a fairly advanced state of deployment, for example, elements introduced in HTML5 and WAI-ARIA properties, then moves through the spectrum to things not quite loose in the wild yet, like Web Components and CSS Variables. The author assumes some proficiency with Web technologies, sparing the busy reader long introductory explanations.

You will get a lot out of this book — in fact, I think you will get the most out of it — by first reading it through without concerning yourself too much with the plentiful code samples and implementation details. You’re unlikely to encounter a more articulate and engaging mid-level overview of the future of the Web platform anywhere, and the opportunity to gain a sense of how it all meshes by a quick read-through should be seized. You can re-read what is most timely for your current project, and then follow the links to further reading for more detailed and up-to-date information.

There is a good bibliography and suggestions for further reading appended to each chapter, and the references are gathered together again near the end of the book.

I found a lot in this book that I knew about, and more that I had never heard of, and came away with some confidence that I know where the technology is heading. I highly recommend this book for working Web developers.

The Modern Web
Peter Gasston
ISBN: 9781593274887
Publisher: No Starch Press
Released: April 2013
Pages: 264

Using Character Entities In CSS content:

Browser differences have kept a lot of developers (I include myself) from using valuable css features. And, a lot of developers (also including myself) keep avoiding them even after browser evolution has made them perfectly mainstream. It’s true, though, that many people stick with obsolete browsers either because their OS forces them to or because they’re ignorant or stubborn. (More on that in a minute.)

Take CSS-generated content. Prior to version 8, Internet Explorer didn’t handle it well and I removed it from my repertoire, but that was several years ago, things have progressed, and now all major browsers support it, so that we can take full advantage of the :before and :after pseudo-classes to make a more usable page.

For instance, somewhere I saw a large, pale, quotation mark used to designate the beginning of a block-quote, maybe not something needed for usability, block-quotes can be styled to set themselves off from surrounding text easily enough, but the additional treatment looked good and, I think, shows a little respect for the person being quoted.  On my personal blog, FrogsForSnakes (you can look there for how it looks), then, I wrote a style rule that looks something like this:

blockquote:before {
  color: #CCC;
  content: "\201C"; /* U+201C */
  font-size: 3em;
  font-weight: bold;
  line-height: 0;
  margin: 0 5px 0 -20px;
  vertical-align: bottom;
}

Look at the “content” declaration. That’s an escaped hexadecimal unicode character — if you put an html character entity between the quotes it will display the code, not the character (“content: ‘>’;” prints “>” for instance, not “>”). That’s the way you have to use character entities in css. I refuse to admit how long it took me to figure that out — without help I’d still be scratching my head.

Posted in CSS

CSS Pre-Processor?

While working on a WordPress theme for a client recently I took some time to explore two CSS pre-processors, SASS and LESS. My ‘exploration’ was a little forced because the eCommerce plugin we used, WooCommerce, uses LESS and we needed to change the stylesheets so the package styles were compatible with the rest of the site template.
(read more )

Posted in CSS