In the last week of December, UMBC political science professor Thomas Schaller published a year-in-review in the Baltimore Sun, highlighting Maryland’s legalization of same-sex marriage, the rise of Gov. Martin O’Malley on the national stage, decreasing rates of violent crime and property crime in Maryland, and improvements in Maryland students’ performance on national education tests. He then recognized the achievements of UMBC President Freeman Hrabowski, who in 2012 received the Heinz Award for Human Condition and was appointed by President Obama to the new Advisory Commission on Educational Excellence for African Americans.

Schaller also appeared in a New York Times blog post by Paul Krugman, who applied the central argument of Schaller’s book Whistling Past Dixie to the issue of gun control.

Every so often, we’ll chat with an alum about what they do and how they got there. Today, we’re talking with Dr. Melanie D. Harrison ’11, Ph.D., Marine and Estuarine Environmental Science, who works as a water quality specialist with NOAA, and who recently was elected by the membership of the American Geophysical Union, the premier professional organization in the earth sciences, as one of two Early Career Scientists on the AGU Council.

Name: Dr. Melanie D. Harrison
Current title: Water Quality Specialist
Employer: Department of Commerce, National Oceanic and Atmospheric Administration (NOAA), NOAA Fisheries

Q: What path brought you to UMBC’s Ph.D. program in Marine, Estuarine, and Environmental Sciences?

A: As an undergraduate at Johnson C. Smith University in Charlotte, NC, I had dreams of becoming a medical doctor. However, I soon realized that I faint at the site of blood and cannot cut a straight line in a stick of butter.  So I quickly began to look for other avenues of interest in the field of science, took a botany course my first year and fell in love with environmental science!

In the summer of 2005, I participated in a National Science Foundation (NSF) program called Research Experiences for Undergraduates (REU) at the Cary Institute of Ecosystem Studies in Millbrook, NY, where I met my former doctoral advisor Dr. Peter Groffman.  His personal and professional mentorship led me, in the fall of 2006, to the doctoral program at UMBC focused on Water in the Urban Environment, in the Marine Estuarine and Environmental Science (MEES) Program as an Integrative Research Education Graduate Trainee (IGERT), a program also found by NSF.

Q: What was your experience here like?

A: My first year attending UMBC was a bit of an adjustment for me academically and socially. I quickly found support through close connections with other IGERT students, as well as mentor-mentee support from professors and many of the programs devoted to helping Ph.D.’s complete their doctoral degree at UMBC.  The campus staff provided support for students and I found the diverse learning environment to be complimentary to my personal and academic needs. Throughout my tenure at UMBC, I found the academic rigor and integrity of the university’s academic leaders to be a much needed and welcomed challenge for me. I was motivated and focused on completing my doctorate, I met others who were just as focused as I was, and I loved it!

The research environment at UMBC fosters innovation and collaboration within and outside the university setting, to address real-world environmental issues in the urban environment.  I was able to engage with stakeholders (local and federal) who were interested in the research I was conducting and having that dialogue was imperative to understanding the implications of my research in a real-world context.

Q: What lead you to focus your dissertation on restoration actions in urban watersheds as a strategy to reduce nitrogen loading in urban storm water runoff?

A: As an REU, I spent the summer of 2005 traveling back and forth to Baltimore, conducting research related to reducing nitrogen pollution in urban restored streams, primarily from urban storm water runoff and leaky septic systems for the BES Long-term Ecological Research (LTER). I was amazed at the number of stream restorations that were conducted, but how so few were engineered to resemble a ‘natural’ stream environment. I began to wonder if these systems really were improving water quality and if so by how much; and “were there other features on the landscape such as wetlands that might also play an important role in the nitrogen removal process in urban landscapes”? From then on I was hooked and it seemed a natural progression for me to study urban aquatic ecology. A year later, I returned to UMBC as a doctoral student to study nitrogen removal in urban wetlands and stream ecosystems.

Q: Tell us a little bit about what you do with NOAA Fisheries. What exactly is a “water quality specialist”?

A: In general, a water quality specialist is responsible for safeguarding all aspects of water quality through scientific analysis and the setting of targets and standards in response to specific legislation. At NOAA Fisheries my work is multifaceted; I am involved in regulation and compliance, providing solutions to water quality problems associated with the impacts to listed species, primarily salmon and steelhead, under the Endangered Species Act (ESA). My work can vary depending on the water quality issues; for example, I may visit sites of concern, for potential sources of pollution or contamination; identify sources of complaints about discharge operations; provide citizens, planners, emergency managers and other decision makers with technical assistance when necessary; liaison with stakeholders and representatives from regulatory authorities; investigate reasons for lapses in water quality and suggest changes or solutions to those problems; and finally conducting research, data interpretation, and analysis related to water quality and setting up field surveys.

Q: What do you like most about your job?

Working at NOAA is all about Science, Stewardship and Service.  Because my work is very interdisciplinary, I have been able to use my research background to help inform policy, practice and implementation associated with water quality issues as it pertains to the conservation and recovery of ESA listed species. I thoroughly enjoy this aspect of my work as it allows me to have the breadth and depth that I need to effectively communicate at many different levels. My job also, provides a platform for me to continue to conduct research that is applicable to solving real-world environmental problems.

Q: What would you say to students interested in pursuing a career of this sort?

A: Having a career as a water quality specialist may seem like a specialized position, but the work is very interdisplinary and encompasses various fields of science to cultivate the specialty. Of all areas of environmental studies, this area is rapidly developing. It is also one of the most diverse areas in terms of disciplines. My words of advice for students who are interested in pursuing a career in water quality are to (1) always think interdisciplinarily and seek out ways to increase your understanding across and within disciplines to increase your knowledge base, (2) network with others who are in the field, (3) ask questions and capitalize on opportunities (intern, volunteer, collaborations, etc.), and finally (4) keep an open mind about being a specialist; don’t limit your opportunities. The world needs highly adaptable professionals with excellent skills in organization, planning, communication, and critical thinking. Remember, diversity spurs innovation, so be creative and design your own career path.

* * * *

Want to tell UMBC alumni about your cool career? Contact Jenny O’Grady at jogrady@umbc.edu.

Monday, Feb. 4 at 12:00 noon to 1:00 p.m. in Acad IV-A 114

Tuesday, Feb. 12 at 4:00 p.m. to 5:00 p.m. in Acad IV-A 114

Kimberly Moffitt, assistant professor of American Studies, was a guest on the “Marc Stenier Show” on Wednesday, January 2, where she looked back at the year in politics and discussed the fiscal cliff.  She was joined by Bob Somerby, editor of the Daily Howler, Richard Vatz, professor in the Department of Mass Communication and Communication Studies at Towson University, Lenny McAllister, conservative media personality, public speaker and writer, and Cheri Honkala, co-founder of the Kensington Welfare Rights Union and co-founder and former vice presidential candidate for the Green Party.

“From a media critic perspective, I’ve just been irritated by the amount of rhetoric around the conversation that has kept us from getting any work done,” Moffitt said, adding that the media’s coverage of the fiscal cliff has made it difficult for the public to be informed on the real issues in the debate.

The full conversation can be heard here.

CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye.

In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions.

Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU.

Browser support

CSS transitions are supported in practically every version of Firefox, Safari and Chrome. They’re supported in IE 10 and onwards. If CSS animations aren’t supported in a given browser, than the properties will be applied instantly, gracefully degrading.

Webkit based browsers (Safari and Chrome), still require -webkit prefixes for animations and gradients, but these are soon being removed.

Applying transitions

A simple way of applying transitions is with CSS pseudo-classes, such as :hover. Notice we’re specifying the property name, the length of transition, and one of the default timing functions, linear [demo].

.element {
      height: 100px;
      transition: height 2s linear;
    }
    
    .element:hover {
      height: 200px;
    }
    

When the :hover pseudo-class is activated, the height will be transitioned linearly from 100px to 200px over a period of 2 seconds.

duration is the only required item in the transition shorthand. The browser defaults to a timing function of ease, and a property of all, unless these are provided.

We don’t want to be restricted to using psuedo-classes when it comes to activating transitions - clearly that’s not very flexible. The solution is to programmatically add and remove classes [demo].

/* CSS */
    .element {
      opacity: 0.0;
      transform: scale(0.95) translate3d(0,100%,0);
      transition: transform 400ms ease, opacity 400ms ease;
    }
    
    .element.active {
      opacity: 1.0;
      transform: scale(1.0) translate3d(0,0,0);
    }
    
    .element.inactive {
      opacity: 0.0;
      transform: scale(1) translate3d(0,0,0);
    }
    
    // JS with jQuery
    var active = function(){
      $('.element').removeClass('inactive').addClass('active');
    };
    
    var inactive = function(){
      $('.element').removeClass('active').addClass('inactive');
    };
    

In the example above, we’ve got two different transitions, the element slides up when activated, and fades out when deactivated. All the JavaScript does is toggle the two classes active and inactive.

Transitioning gradients

Not every CSS property can be transitioned, and the basic rule is that you can only transition through absolute values. For example, you can’t transition between a height of 0px to auto. The browser can’t calculate the intermediate transition values, so the property change is instant. Oli Studholme has conveniently provided a full list of transition support properties.

The other major property that can’t be transitioned between is background gradients (although pure colors are supported). There’s no technical reason behind this limitation, it’s just taking a while for the browsers to implement support.

In the mean time, there are a few good workarounds. The first involves adding a transparency to the gradient, and then transitioning between background colors. For example [demo]:

.panel {
      background-color: #000;
      background-image: linear-gradient(rgba(255, 255, 0, 0.4), #FAFAFA);
      transition: background-color 400ms ease;
    }
    
    .panel:hover {
      background-color: #DDD;
    }
    

If the gradient is continuous, you can transition the background-position as documented here. Otherwise, your last resort is to create two elements, one overlaid on top of the other, and transition their opacity [demo].

.element {  
      width: 100px;  
      height: 100px;  
      position: relative;
      background: linear-gradient(#C7D3DC,#5B798E);    
    }  
    
    .element .inner { 
      content: '';
      position: absolute;
      left: 0; top: 0; right: 0; bottom: 0;
      background: linear-gradient(#DDD, #FAFAFA);          
      opacity: 0;
      transition: opacity 1s linear;
    }
    
    .element:hover .inner {
      opacity: 1;
    }
    

The caveats to the latter approach are that it does require extra markup, and the inner div can catch pointer events. Pseudo elements, such as :before and :after would be an ideal use-case here, but unfortunately only Firefox supports pseudo element transitions. Eliott Sprehn is working on support for Webkit, which is coming soon.

Hardware acceleration

Transitioning certain properties, such as left and margin causes the browser to recalculating styles every frame. This is fairly expensive, and can lead to unnecessary re-paints, especially if you have a lot of elements on the screen. This is especially noticeable in less powerful devices, such as mobiles.

This solution is to offload the rendering to the GPU using CSS transformations. In simple terms, this turns the element into an image during the transition, avoiding any style recalculations which greatly increases performance. A simple way of forcing the browser to hardware render an element is to set the transformation’s z axis, which you can do with translate3d:

transform: translate3d(0,0,0);
    

Now, this isn’t a magic cure to performance problems, and comes with lots of issues of its own. You should only use hardware acceleration when it’s required, and certainly not enable it on every element.

For example, hardware acceleration can cause subtle font issues, such as a font appearing to lose its weight. This is due to a bug where subpixel anti-aliasing isn’t supported when an element is being hardware accelerated. You can see a clear difference between the two rendering modes:

The short-term fix, albeit controversial, is to disable subpixel anti-aliasing completely. However, be sure to understand the caveats in doing so.

  font-smoothing: antialiased;
    

In addition, different browsers use different hardware acceleration libraries, which can cause cross-browser problems. For example, whilst Chrome and Safari are both built on WebKit, Chrome uses Skia for graphics rendering while Safari uses CoreGraphics. The differences between the two are subtle, but real.

You can use Chrome’s Inspector to Profile the page, showing all the repaints. Additionally you can show paint triangles in the Inspector’s options, and even turn on Composited Render Layer Borders in about:flags to see which layers are operating on the GPU. The key is to reduce paints by batch updating the DOM, and move as much as possible to the GPU.

If you’re having display issues between browsers with hardware acceleration, such as flickering or juddering, make sure you’re not nestling elements with the transform3d() CSS property set. As a last resort, try having browser specific transformations.

It’s worth noting that the translate3d hack is becoming less relevant. In fact recent builds of Chrome automatically use the GPU for opacity and 2d transitions. iOS6 Safari has explicitly disabled this trick, and requires yet more workarounds.

Clipping

To take advantage of GPU rendering, you’ll need to avoid style recalculations by using CSS transformations rather than properties like width. What do you do though if you do need to animate an element’s width? The solution is clipping.

In the example below, you can see a search box with two transition states. The second expanded state is hidden by a clipping element.

To transition to the expanded width, all we need to is translate the X axis left. The key thing here is that we’re using translate3d rather than altering the element’s width [demo].

.clipped {
      overflow: hidden;
      position: relative;
    }
    
    .clipped .clip {
      right: 0px;
      width: 45px;
      height: 45px;
      background: url(/images/clip.png) no-repeat
    }
    
    input:focus {
      -webkit-transform: translate3d(-50px, 0, 0);
    }
    

By ensuring that we’re not recalculating the element’s width every frame, the transition will a whole lot smoother and performant.

Timing functions

So far we’ve been using some of the browser’s pre-defined timing functions: linear, ease, ease-in, ease-out and ease-in-out. For more complex timing functions we’re going to have to write our own timing function by specifying four points along a cubic-bezier curve.

transition: -webkit-transform 1s cubic-bezier(.17,.67,.69,1.33);
    

Rather than guessing at values, it’s often easier to either use a bunch of pre-defined curves, or play around with a graphing tool.

Notice you can drag the values out of bounds and produce a bouncing transition, for example:

transition: all 600ms cubic‑bezier(0.175, 0.885, 0.32, 1.275);
    

Programmatic transitions

Writing transitions in CSS is all very well, but sometimes you need a bit more control, especially when it comes to chaining transitions. Luckily we can not only invoke transitions from JavaScript, but also define them.

CSS transitions take a magical all property which ensures that any property changes are transitioned. Let’s see how to use this in practice [demo].

var defaults = {
      duration: 400,
      easing: ''
    };
    
    $.fn.transition = function (properties, options) {
      options = $.extend({}, defaults, options);
      properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
      $(this).css(properties);
    };
    

Now we have this jQuery function $.fn.transition, which we can use to programmatically invoke transitions.

$('.element').transition({background: 'red'});
    

Transition callback

The next step to chaining transitions is having transition end callbacks. You can achieve this in Webkit, by listening to the webkitTransitionEnd event. For other browsers, you’ll need to do a bit of sniffing to find the right event name.

  var callback = function () {
        // ...
      }
    
      $(this).one('webkitTransitionEnd', callback)
      $(this).css(properties);
    

Be aware that sometimes this event doesn’t fire, usually in the case when properties don’t change or a paint isn’t triggered. To ensure we always get a callback, let’s set a timeout that’ll trigger the event manually.

$.fn.emulateTransitionEnd = function(duration) {
      var called = false, $el = this;
      $(this).one('webkitTransitionEnd', function() { called = true; });
      var callback = function() { if (!called) $($el).trigger('webkitTransitionEnd'); };
      setTimeout(callback, duration);
    };
    

Now we can invoke $.fn.emulateTransitionEnd() before we set the element’s CSS to ensure our transition end callback is triggered [demo].

$(this).one('webkitTransitionEnd', callback);
    $(this).emulateTransitionEnd(options.duration + 50);
    $(this).css(properties);
    

Chaining transitions

So now we can programmatically apply transitions, getting callbacks when they finish, we can start queuing transitions. We could write our own queue to do this, but as we’re using jQuery we might as well tap into the library’s existing functionality.

jQuery provides two main functions to communicate with its queuing API, $.fn.queue(callback) and $.fn.dequeue(). The former adds a callback to the queue, while the latter executes the next item on the queue.

In other words we need to set our CSS transition inside a $.fn.queue callback, and then make sure we invoke $.fn.dequeue when the transition is complete [demo].

var $el = $(this);
    $el.queue(function(){
      $el.one('webkitTransitionEnd', function(){
        $el.dequeue();
      });
      $el.css(properties);
    });
    

That’s example is fairly simple, but it lets us build up complex chained animations, and even use jQuery’s delay() function; for example:

$('.element').transition({left: '20px'})
                 .delay(200)
                 .transition({background: 'red'});
    

Redrawing

Often when transitioning, you’ll have two sets of CSS properties. The initial properties that the animation should start at, and the final set of properties the transition should end on.

$('.element').css({left: '10px'})
                 .transition({left: '20px'});
    

However, you’ll find that if you apply both sets of properties, one immediately after the other, then the browser tries to optimize the property changes, ignoring your initial properties and preventing a transition. Behind the scenes, browsers batch up property changes before painting which, while usually speeding up rendering, can sometimes have adverse affects.

The solution is to force a redraw between applying the two sets of properties. A simple method of doing this is just by accessing a DOM element’s offsetHeight property, like so [demo]:

$.fn.redraw = function(){
      $(this).each(function(){
        var redraw = this.offsetHeight;
      });
    };
    

This will work in most browsers, but I’ve had occasions in Android where this hasn’t been enough. The alternative is to either use timeouts, or by toggling a class name.

$('.element').css({left: '10px'})
                 .redraw()
                 .transition({left: '20px'});
    

The future

Transitions are being actively worked on, and the next spec looks really promising. The proposals include a new JavaScript API focussing on addressing some of the existing limitations to transitions, and giving developers much more flexibility.

In fact, you can find a shim on the new API on GitHub. It involves instantiating a Animation constructor, passing in an element to animate, the properties to animate to, and various other options such as a delay.

var anim = new Animation(elem, { left: '100px' }, 3);
    anim.play();
    

With this new API you can synchronize animations, provide custom timing functions, and get completion callbacks. This is truly exciting stuff!

Transitions

By now, you hopefully have a deeper understanding of CSS transitions, and how a simple API can be combined to produce complex and rich effects.

Most of the JavaScript examples come straight out of the source of GFX, a jQuery CSS transition library. As well as the core library, I’ve included a number of additional effects, such as slide in/out, explode in/out and 3d flipping.

Thanks to Paul Irish for reviewing this article.

Incidentally, I’ve been turning the contents of this post into a talk. If you know or organize a conference that would be suitable for this material, please do get in touch! Over the last year I spoke at six conferences, and I’m keen to do even more in 2013.