Software Engineering principles applied to CSS

Some of my thoughts about CSS developent. Think of more? Share in the comments and I’ll add them to this page!

Low Coupling

The principle of low coupling suggests that distinct parts of an application be as “stand-alone” as possible.

To illustrate: A very decoupled program could be available from the command-line first, then a GUI is built using that programs API’s. This ensures that the logic of the program is decoupled from the presentation. A developer can change the internal workings of the program without affecting the other aspects of the architecture.

Targeting elements based on their DOM order tangles up the visual presentation (CSS) with the structured content (HTML) – Highly coupling the presentation with the content.

Changing the name of your parent container shouldn’t detach your horizontal menu from its style.

Separate the presentation from the structure with the use of classes:

High Cohesion

Separating the concerns of CSS into different files allows you to create highly cohesive classes that, once in place, allow a great deal of flexibility in development. Areas of concern are:

  • Layout: positioning of elements, geometric dimensions
  • Style: colors, borders, backgrounds
  • Normalization: typography, element defaults

Separating the CSS into separate areas allows you to create highly cohesive “modularized” rules that have the bonus of being easily swappable:

  • Layout-full.css, layout-compact.css
  • Blue.css, green.css, red.css
  • Normalize.css

Any combination of the above files could be used to alter the presentation of the application without changing the content architecture.

Inheritance

If elements are targeted by semantic classes, instead of their order in the DOM, it is easy to modularize classes using the principle of inheritance:

This is a popular technique in many rapid development frameworks, such as Bootstrap, Zurb, and others.

Additionally, CSS may use the principle of multiple inheritance by using styles from multiple sources – such as a horizontal navigation getting its form and function from layout.css, and its color and branding from color.css files.

Generalization

In software engineering, the most general use-case is often sought, as it will eliminate redundant future work. Nathanial Borenstien, inventor of the MIME type once said,

“It should be noted that no ethically-trained software engineer would ever consent to write a DestroyBaghdad procedure. Basic professional ethics would instead require him to write a DestroyCity procedure, to which Baghdad could be given as a parameter.”

Name classes based on their general use-case, rather than on their appearance, position, or other attribute.

If not, ‘The boss’ might ask you to change the submit button to green, but the in-code class will stay .button-blue  forever, because it is already in hundreds of places.

Naming classes on their general case avoids this problem, and also makes for easy discovery and maintenance by future programmers, or your future self.

Additionally, duplication of elements becomes easier. If not, you might need to duplicate the element somewhere other than the original place, and you end up with navigation in the footer called  .sidebar-nav

Abstraction

If using the principle of generalization, there may be some base class that is never intended to be used on an element on its own. To provide some level of abstraction, only declare universal attributes on parent classes.

Encapsulation (private styles)

By using the principle of inheritance, we can make some classes essentially private by namespacing their selector rules:

This ensures our style definitions don’t ‘leak’ into other elements, and can only be used within a specified parent element.

Custom events system in JavaScript – LightEvents.js

Needing an event subscription and publishing system for a HTML5/canvas game I’m creating, I wrote a very light event system.

Anything than can call JavaScript (link, button, etc) can raise an event:

LightEvents.publishEvent('event name', data);

Subscribing to events is equally easy:

Here is the LightEvents object, demo is embedded below

JS Bin

Quick and reliable ad-rotator

In the course of my work, I’ve created and refined a simple ad rotator. It is built in JavaScript, and does not rely on any library, like jQuery, to function.  In my experience, it defeats ad-block, and loads easily on all mobile, tablet, and desktop browsers.

The rotator can be included multiple places on one page without any conflicts or collisions, so just drop-in where needed. Some coding is required to customize — basically copying and pasting your links and image urls, but nothing too heavy.

 

Creating a microformat / richsnippits resume

What are microformats?

Microformats are small patterns of HTML to represent commonly published things like peopleeventsblog postsreviewsand tags in web pages.

Microformats are the quickest & simplest way to provide an API to the information on your website. See what else you can do with microformats.

Have you ever searched for a recipe on Google, and wondered how the highlight data like ingredients or cook time on the search results? Microformats. Or, wondered how they can aggregate reviews, locations, and prices for a restaurant search? Microformats.

Make your resume semantically searchable and available by implementing microformats.

There are several types we will implement from the microformat standard, schema.org, for fields on our resume:

  • http://schema.org/Person
  • http://schema.org/PostalAddress
  • http://schema.org/CollegeOrUniversity
  • http://schema.org/Organization

Resume Sample

View the resume here, and a Google’s report on extracted data here.

 

Horizontal vs. Vertical button groups

Button groups are an important part of user interface design, but choosing their orientation can often be difficult. I’d advocate that horizontal groupings are better in most cases — consider this:

Imagine that each element on the page is assigned a “Danger Zone” — and area where within one unit of margin of error,  an undesirable action will occur. In mobile interfaces, this unit is the width of a finger, or the accuracy of a touch on the device.

Horizontal vs Vertical button groups
The orange area represents the “Danger Zone”

The danger zone in button groups extends along the edge of the button that is touching another item. As represented above in orange, the danger zone for a vertical button group extends across the width of each button — covering nearly 50% of the surface. This reduces the touch-safe portion of the button to a slim area, greatly diminishing the effect of “friendliness” in the minds of the users. Clicks to these buttons must be precise, and the consequence is not just the inconvenience of a missed button, but the danger of a click on the wrong one.

Consider the horizontal button group: the danger zone only extends over a small percent of each button. Users can click or touch imprecisely and without stress. Additionally, horizontal button groups easily convey a “forward” and “backward” action, which lends itself well to buttons like Save or Cancel.

One major offender is jQuery Mobile — arguably the defacto  standard framework for mobile development. By default, button groups in jQuery Mobile are vertically oriented. Although it is simple to switch the grouping to horizontal, some are under the false impression that the default option is the best choice.

jQuery Button Groups
How easy is that to “Fat Finger”?

Facebook Black Theme (IDE Theme)

Using the Google Chrome plugin Stylish, users can add custom CSS to be applied to any domain. I’ve created a dark CSS theme for Facebook, called FaceBook IDE

Within Stylish (found in the Chome menu bar):

  • Write a new style
  • Paste the theme into the box
  • Add the domain “facebook.com” into the “applies to” field
Facebook Black screenshot
The theme should automatically apply to your Facebook news feed. This theme is still in development, and has areas on other Facebook pages, which are not yet styled.

 Updates:

11/21/2012

  • darkened modal popup for photos
  • pinkified like links

 

Convert
tag to Google Maps embed automatically with jQuery

Converting an <address> tag into a Google maps link is something I’ve written about in the past, but user “Moose” was wondering if you can do the same thing, but transform it into an embedded map. Quick answer: Yes!

Using jQuery, we search the document for <address> tags,  create some HTML to embed the map with the current address inserted in it, then write that HTML out into the current spot.

Welcome to JS Bin

JavaScript Constructors

Due to the familiar syntax of JavaScript, it is easy for experienced developers to make blunders without knowing it. One common problem is crafting object constructors. With some simple knowledge and scope checks we can create well formed constructors that function as developers expect.

Because syntax and control structures look very similar in classic OOP languages (Java, C#) to JavaScript, it can be easy for experienced developers to jump-in, make progress, and then shoot themselves in the foot due to misunderstanding core differences in underlying language design.

One of those core differences is how functions can function as objects with constructors.

In a classic OOP language, a class,  constructor, and usage might look something like this:

Although the syntax is similar, doing something like this in JavaScript will land you in a bad place:

Scope

The first and most pressing issue is scope management.  Look back up the the JavaScript example — The function used in place of a class, is just that: a Function. Whereas a custom class is a datatype, a template for data, our function is a function in the same way as this is a function:

Primarily, the problem is with the scope of the this keyword with in functions.  Inside of a OOP language class, the this keyword refers to the parent object — the class that it is inside of. For example:

However, in side of a JavaScript function, the this keyword refers to the global scope, or the window object. Thus:

For the uninitiated, this can cause big problems. For example, consider:

A function/object Building, which contains the properties height, location, and occupancy, which are assigned like this: this.location = “123 N. 789 W.” Since the this keyword refers to the window object, your function has just overwritten window.location, the property used in changing the current location (url) of the page. Whoops!

But wait, there is a solution!

It is true, that a JavaScript object/function is really just a function — but you can create new instances of the function using the new keyword. Not only does the new keyword created a new instance (so you can have multiple objects of the same type on a page), but also assigns the scope of the this keyword to the function, NOT the window object. So, to use the previous example without clobbering the global scope:

However, if you have ever written a line of jQuery, you might be shaking your head in disagreement. Like you, I write something like this weekly:

So, how does that work?

To make sure that jQuery object is allways called with the new keyword, it does it for you, every time. See the jQuery source constructor:

So, each time $(“#asdf”) is used, jQuery returns a new jQuery.fn.init object. Now, keep in mind that this is one of several hundred lines within jQuery’s constructor source, but the key section for this subject. We can implement this method, with a few checks, in our code very easily.

Conclusion and template

So, to avoid clobbering the global scope, and to be convenient for implementers of your code, here is a well functioning JavaScript constructor template that can be implemented in your code:

See a demonstration of new keyword usage

JS Bin

jQuery List sorting plugin

In the standard course of programming for my job and school, I have occasionally come to the need of a simple function or plugin to numerically sort UL list items.  In the spirit of sharing with the community, here is a jQuery plugin that I wrote to accomplish this. It’s quite simple — just does what it does.

Demo

 

100% height using jQuery

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here /2016/modern-100-percent-height-css/

I few years ago, I wrote a post about forcing two divs to be equal height — quite a feat if you’ve ever tried!  Since then, a great jQuery plugin has came out that makes equal div height pretty easy to accomplish.

Using the plugin jQuery.equalHeight, it is as simple as:

Try out a live demo.

Of course, you should make your decision to use this method carefully. It’s quick and easy, but if your aren’t using jQuery already, is it worth the load time for this fix? If you want to check out a non-jQuery solution, check out this vanilla JavaScript solution.

JS Bin