Apple's 'transparent texting' tech lets iPhone users safely message while moving

To enable a "transparent texting" system, Apple proposes that an app's background be modified to display video images continuously captured by an iPhone's rear-facing camera, according to a patent application filed with the U.S. Patent and Trademark Office. 

Due to their inherently mobile nature, smartphones are often used while moving. This is fine for voice calls, but could be problematic for operations that demand visual attention like reading or writing text messages. Aside from appearing antisocial, texting could potentially cause bodily harm if a user operates their device while walking. 

If smartphones were to have a transparent display, or a system that offers the illusion of transparency, users would be more aware of their surroundings. 

The implementation as described by Apple is quite simple. A device uses its rear-facing camera to continuously capture video and present the images as a background within a text messaging app currently being displayed. The onscreen result would be offer the illusion of a transparent display with floating text. 

In one embodiment, the live video background is displayed behind the usual dynamic user interface seen in iMessage, complete with colored bubbles denoting a chat session between two or more people. These bubbles may be opaque or, in some cases, partially transparent to allow greater visibility of the live background. 

The system can be activated via an in-app button that transforms the GUI from the normal white background to a live video version. Extending the application beyond messaging apps, the live video feed can be used in other situations requiring a significant amount of visual concentration. For example, the implementation may be an option in the use of mobile Web browsers, where text and images would float over the live-view background. Another embodiment covers e-book readers such as Apple's iBooks.

While not a completely foolproof system (users must point the iPhone camera straight ahead while walking for full visibility), Apple's invention proves the company is actively investigating unique ways to leverage existing hardware technology for the purpose of enhancing the mobile device experience.It is unknown if Apple is planning to work such a feature into its next iOS build, but the tech required to enable similar functionality is already in place. A transparent texting window could even be considered a good fit with the new "flat," layered iOS 7 design aesthetic. 

Web Animations - element.animate() is now in Chrome 36

Web Animations - element.animate() is now in Chrome 36

Animation on the web was once the province of JavaScript, but as the world moved to mobile, animations moved to CSS for the declarative syntax and the optimizations browsers were able to make with it. With 60fps on mobile always your goal, it makes sense to never step outside of what browsers know how to efficiently display.

More tools are appearing to make JavaScript-driven animations more efficient, but the holy grail is a unification of declarative and imperative animations , where the decision of how to write your animations is based on what’s the clearest code, not what is possible in one form and not in the other.

Web Animations stand to answer that call, and the first part of it has landed in Chrome 36 in the form of element.animate(). This new function lets you create an animation purely in JavaScript and have it run as efficiently as any CSS Animation or Transition (in fact, as of Chrome 34, the exact same Web Animations engine drives all of these methods)

The syntax is simple, and its parts should be familiar to you if you’ve ever written a CSS Transition or Animation:

element.animate([
  {cssProperty: value0},
  {cssProperty: value1},
  {cssProperty: value2},
  //...
], {
    duration: timeInMs,
    iterations: iterationCount,
    delay: delayValue
});

The biggest advantage of this new function is the elimination of a lot of awkward hoops we formerly had to jump through to get a smooth, jank-free animation.

As an example, for Santa Tracker last year, we wanted to have snow falling continuously, and we decided to animate it via CSS so that it could be done so efficiently.

However, we wanted to pick the snow’s horizontal position dynamically based on screen and events going on in the scene itself, and of course the height of the snow’s fall (the height of the user’s browser window) wouldn’t be known until we were actually running. This meant we really had to use CSS Transitions, as authoring a CSS Animation at runtime gets complex quickly (and hundreds of snowflakes means hundreds of new styling rules).

So we took the following approach, which should be familiar:
snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)';
// wait a frame
snowFlake.offsetWidth;
snowFlake.style.transitionProperty = 'transform';
snowFlake.style.transitionDuration = '1500ms';
snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)';

The key is in that 'wait a frame’ comment. In order to successfully start a transition, the browser has to acknowledge that the element is in the starting position. There are a few ways to do this. One of the most common ways is to read from one of the element properties that forces the browser to compute layout, thereby ensuring it knows that the element has a starting position before transitioning to the ending position. Using this method allows you to congratulate yourself on your superior knowledge of browser internals while still feeling dirty with every keystroke.

In contrast, the equivalent `element.animate()` call couldn’t be more clear, saying exactly what is intended:
snowFlake.animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);

There are many more options. Just like with its CSS counterparts, Web Animations can be delayed and iterated:
snowFlake.animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
  duration: 1500,
  iterations: 10,
  delay: 300
});