TUANLEADED


http://jsfiddle.net/ENcky/1/

Accordions without JavaScript: Storing Application State with HTML, CSS

Here is a little thought experiment revolving around the ~ selector in CSS. When used in conjunction with a hidden input, it can effectively store the state of an application without using JavaScript.

Read more »

One-Time-Use Function

You can use a one-time-use function when you have a function that only needs to be executed once. Don’t mistake it for a Singleton pattern, which ensures that only one instance of an object is available at any given time.

In this case here, there is normally a cost incurred every time closeTeaser() is invoked. However, we can redefine closeTeaser to be an empty function after the first time it is invoked:

closeTeaser = function () {
  var $teaser = $("#teaser");

  if ($teaser) {
    //do something
  }

  // Redefine the function so that subsequent calls do nothing.
  closeTeaser = function(){};
};

Notice that we used a function expression:

closeTeaser = function(){...};

as opposed to function declaration:

function closeTeaser() {...}

When defined as a function expression, closeTeaser is a variable that happens to point at a function; JSHint won’t bark when you attempt to reassign that variable to another function.

If you define closeTeaser() as a function declaration, then attempt to assign a function to closeTeaser(), JSHint will give you the following error:

'closeTeaser' is a function.

Domify

A quick little utility function to help turn your HTML into DOM elements:

domify = function( str ) {
  var temp = document.createElement('div');
  temp.innerHTML = str;
  return temp.firstChild;
};

JavaScript tagName with SVG

We can use the tagName property to determine what kind of element we are handling. This can be used in conjunction with event delegation: when the user hovers over a large area, we handle it by determining the target of the event.

An example can be found in High Performance JavaScript:

document.getElementById('menu').onclick = function(evt) {
  evt = evt || window.event;
  var target = evt.target || evt.srcElement;

  if( target.tagName !== 'A' ) {
    return;
  }

  handleEvent(evt);
}

We can see this script detects if our target is an anchor, and is straightforward to modify if you’d like to handle other HTML elements differently – simply swap out A with SPAN, DIV, etc. But what if you need to handle SVG elements?

According to MDN’s article on element.tagName:

  1. In HTML, the tagName is returned in all caps
  2. In XHTML or any other XML format, the tagName is returned in lowercase

So if your event handler is checking for tag name, it may return elements of the page in all caps, such as BODY, A, SVG, but within the SVG, an element’s tagName will be returned in lowercase, such as circle.

If you’d like to not have to deal with remembering between uppercase and lowercase, perhaps you can use the toLowerCase() method to process all of your tagNames and make them lowercase.

Running SASS –watch in Background

I have a basic project that uses Sass hosted on my httpd server. The command I use to have Sass watch for changes in the background is:

cd /var/www/html/_
sass --watch scss:css &
disown

The way I have my workspace set up, I keep the following two directories in /var/www/html:

  • scss directory where I keep main.scss and other Sass files
  • css direcotory, where main.scss is kept after being compiled by Sass

The & runs the process in the background, and disown allows you to close the terminal window or log out without stopping the process (e.g. it prevents the SIGHUP signal from being sent).

Killing the Process

Run the following command to search for the Sass process and kill it:

ps -aef | grep sass | grep scss | awk '{print $2;}' | xargs -i kill {}

I’m [in]

I thought I’d make a quick post to let everyone know two things, in no particular order:

  1. Any viewpoints and opinions expressed in this article are those of my own and do not, in any way, reflect those of my employer, my colleagues, or anyone else. I speak only for myself, not for them.
  2. I’m now a web dev at LinkedIn.

Digesting JavaScript Good Parts: Arguments & Currying [draft]

A variadic function is one that takes in a variable number of arguments. In this article, I’m going to take a look at some of the different ways this can be handled in JavaScript:

  1. Function Overloading
  2. The arguments object
  3. Passing arguments as an object
  4. Currying

Read more »

CSS Opacity

CSS3 has an opacity property that allows us to control the transparency level of an object. The following CSS makes our links appear at 60% opacity (40% transparent), then when hovered over (with a mouse) or focused (with keyboard navigation) they become a little more salient at 80% opacity (20% transparent):

a {
  opacity: .60;
}

a:hover, a:focus {
  opacity: .80;
}

Opacity can be a float that ranges between 0 (100% transparent; not visible) and 1.0 (100% opaque; visible, and covering all layers below it). Values between 0 and 1 will make an element somewhat transparent, allowing layers beneath the object to be somewhat visible.

Benefits of and Alternatives to Using Opacity

Combining opacity with CSS transition can enhance the user experience for visitors with modern browsers. As they interact with elements on the webpage, the elements subtly react and “come alive.”

Sometimes, it can be used interchangeably with rgba; the following two definitions are almost identical:

.foo{
  background: white;
  opacity: .80;
}

.bar {
  background: white;
  background: rgba(255,255,255,0.8);
}

However, rgba isn’t supported in all browsers; .bar elements will be 100% white (no transparency) as the rgba will be ignored in browsers that don’t support it.

Then again, opacity isn’t supported in all browsers, but with filter and -ms-filter properties we can get around it in older versions of IE.

Drawbacks of Using Opacity

Opacity impacts it’s children, which might not always be what we want. Going back to our previous examples .foo‘s children will also be 20% transparent. If we only wanted the background to be semi-transparent, then .bar might be a more appropriate definition, although it won’t work across all browsers.

Cross-Browser Opacity

IE 9 supports the opacity property, but for previous versions of IE as well as older versions of Firefox and Konqueror, we’ll need to use the following:

a {
  -moz-opacity: .25;
  -khtml-opacity: .25;
  opacity: .25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";  /* IE 8 */
  filter: alpha(opacity = 25);  /* IE 5-7 */
}

LESS Opacity Mixin

The following Less CSS mixin can be used to easily attain cross-browser compatibility for controlling opacity:

.opacity(@o: 50) {
  @ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{o})";
  
  -moz-opacity: @o/100;
  -khtml-opacity: @o/100;
  opacity: @o/100;
  -ms-filter: "@{ms-filter}";  /* IE 8 */
  filter: ~"alpha(opacity = @{o})";  /* IE 5-7 */
}

This mixin will accept a value from 1 to 100, convert it to a decimal for the opacity properties, and use the integer value for the Microsoft filters.

The following declaration

.foo{
  .opacity(75);
}

Will compile as:

.foo {
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity = 75);
}

Digesting JavaScript Good Parts: Invoking Functions [draft]

There are four basic ways to invoke a function in JavaScript:

  • Method Invocation
  • Function Invocation
  • Constructor Invocation
  • Apply Invocation

You can view these examples in jsFiddle, or by cloning the /js-sandbox/invocation project on GitHub

Read more »