On a desert journey, coffee-scented oases of WiFi.

As loyal readers already know, a few months ago I embarked upon an experiment: I junked my iPhone. Surprising even myself, at the end of the appointed month, I decided not to go back to it. Currently, I make do with a very basic Alcatel phone, together with a hand-me-down dataless Verizon iPhone that I use as a de facto iPod Touch.

Manil Suri, professor of mathematics, was recently a guest on the BBC World Service program “The Forum” to discuss “Obsessions, new and old, in literature and technology.”  Joining Suri on the show, which was hosted by Bridget Kendall, were internet analyst and cyber-sceptic Evgeny Morozo and Spanish novelist and translator Javier Marias.

Suri discussed his recent novel, “The City of Devi,” in which the main character is obsessed with bringing a pomegranate to her missing husband.

“She feels that having this symbol almost will somehow lead her to her husband. And in a way it does tell her something about her marriage, but in a very unexpected fashion,” he said.

The guests also spoke about our obsession with technology.  “There’s this belief in technology and computers – these are going to really save us from having to think,” Suri said.

Pasquale D’Silva’s article Transitional Interfaces has really been making the rounds. It's a quick read that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a page.

If a list item is inserted into a list, rather than having it suddenly appear, an animation that moves the list to make room makes it extremely obvious what is going on. Otherwise it's blink-and-you-miss-it.

The animated GIF's in the article make it, so go check that out.

Pasquale wasn't saying do exactly this every time! But they are nice examples so I figured I'd take a crack at making them happen on the web.

Check out the coded examples of transitional interfaces on CodePen.

Nothing groundbreaking, but a couple of tricks at play.

In the list-item-adding examples, the space is made in the list by at first setting the list items to max-height: 0; and having an @keyframes animation run on them which expands the max-height to 50. Careful there to make sure that number is high enough to cover the space with a reasonable enlargening of text.

The @keyframes only have a to { } block. When the from { } or 0% { } block is ommitted, it just starts the animated properties at whatever they are naturally. Height, opacity, and scale are all used here to make it pop into place.

.new-item {
      max-height: 0;
      opacity: 0;
      transform: scale(0);
      animation: growHeight 0.2s ease forwards;
    }
    @keyframes growHeight {
      to { 
        max-height: 50px;
        opacity: 1;
        transform: scale(1);
      }
    }

In the slide-in example, first the space is created in the list, then the item is slide in to that space. That is done by using two different @keyframe animations. One to make the space, the other to do the slide. You can apply them both to a single element, spacing out the time in which they are run.

.new-item {
      max-height: 0;
      opacity: 0;
      transform: translateX(-300px);
      animation: 
        openSpace 0.2s ease forwards,
        moveIn 0.3s 0.2s ease forwards;
    }
    @keyframes openSpace {
      to { 
        max-height: 50px;
      }
    }
    @keyframes moveIn {
      to { 
        opacity: 1;
        transform: translateX(0);
      }
    }

The second animation value has a second time parameter, which is the delay. The delay is the same as the duration of the first animation. So they run in sequence.

In the pop-up details view example, the list item is grown in size by using transform: scale(X); Behind it, the list is hidden from view by also using a scale transform. It makes itself much smaller and hides behind the expanded list item, which transforms many times the size of itself to compensate.

Transitional Interfaces, Coded is a post from CSS-Tricks

ECOFEST

Celebrating Earth Day 2013

Mon 4/22 10am-2pm: Kick-off Fair:
Quad, Rain location: Lower Flat Tuesday's

Live music, drum circle, solar cooking, & student orgs, non-profits & local businesses
Hosted by Students for Environmental Awareness

Tues 4/23, 4pm: Global Solar Technology
Clean Energy Technology Incubator @bwtech (CETI), UMBC South Campus

From Europe to developing countries, learn about innovative initiatives addressing climate change

Featuring international leaders in renewable energy: Deepak Gadhia & Bjorn Frogner

Tues 4/23, 5pm: Thin Ice Film screening
Sports Zone, 2nd floor of the Commons

Global release of a new documentary on climate change science with free popcorn
Hosted by UMBC Climate Change Taskforce

Wed 4/24, 3pm: On Campus Tree Planting

Between lots 1 and 3 off Park Road, behind Physics & Public Policy Buildings

Volunteer with students & staff to increase our tree canopy

Hosted by Parks & People, AKA Sorority, the Arbor Day Foundation & PSS

Thurs 4/25, 12-1pm: Nutrition & Agriculture Brown Bag Lunch
Fine Arts, Room 529, INDS conference room

Bring your lunch & discuss food systems issues ranging from wellness to sustainability

Thurs 4/25, 12-1pm: Climate Change projections in Maryland

UMBC Information Technology and Engineering building (ITE), Room 102

An Introduction to Climate Change: local & future impacts, featuring Dr. Jeffery Halverson

Thurs 4/25, 2pm-3pm: Herbert Run Greenway Tour
Departing from Joseph Beuys SculptureGarden Rock Garden

Hosted by Patricia La Noue, Greenway Founder

Fri 4/26, 12-1pm: Bicycle Pro Tips Clinic & Group Ride (on campus)

Commons Terrace, adjacent to the Quad

Polish your skills in bicycle maintenance, handling & road riding etiquette, then give it a whirl!
Hosted by the UMBC Cycling Club

Fri 4/26, 12-1pm: Make Your Own Tree (craft)

Commons Mainstreet

Hosted by the Student Events Board

• facilitating the meetings and development of the First Year Council
• assisting in the coordination and marketing of LeadingOrgs (September), the STRiVE Leadership Retreat (January) and Celebrate Black & Gold (May), which will include working with Student Life staff to update curriculum, brainstorm logistics and manage preparation and on-site needs
• contributing to and coordinating Leadership Advisory Committee meetings; and
• creating online media content (Twitter, myUMBC, #UMBC30DayChallenge)

A CSS redundancy analyzer that analyzes redundancy.

Gives you output like:

{.contact .content .primary} and {article, #comments} share 5 rules

If you have multiple selectors sharing five or more rules (properties with the same value), that's likely a good opportunity for optimization (combine into new class or comma separate selectors elsewhere).

Someone should make a hosted version where you just drag-and-drop a .css file to analyze.

Direct Link to Article — Permalink

csscss is a post from CSS-Tricks