Rexfeng

People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function!

OK, so the subject matter of this article probably hasn’t sent your blood racing, but all jokes aside, the timing function is a bit of a hidden gem when it comes to CSS animation, and you could well be surprised by just how much you can do with it.

First of all, let’s set the scene and ensure we’re all familiar with the scenarios in which the timing function is relevant. As alluded to, the functionality becomes available when you’re working in the realm of CSS animation, which includes CSS transitions as well as keyframe-based animation. So, what exactly is it and what does it do?

The CSS Timing Function Explained

It’s one of the less obvious animation-based CSS properties, whereas most of its counterparts are rather self-explanatory. Nevertheless, the gist of it is that it enables you to control and vary the acceleration of an animation — that is, it defines where the animation speeds up and slows down over the specified duration.

While it does not affect the actual duration of an animation, it could have profound effects on how fast or slow the user perceives the animation to be. If you’re not sold having learned of its actual purpose, then stick with me here because the timing-function property gets a lot more interesting than the definition suggests.

Note: There is no actual property named “timing-function.” When I refer to this “property,” I am actually referring to both the transition-timing-function and the animation-timing-function properties.

Before moving on, let’s just familiarize ourselves with the syntax and where it fits into the whole process of defining an animation in CSS. To keep things simple, let’s use a CSS transition for this example. We’ll begin with the full array of transition properties:

div {
   transition-property: background;
   transition-duration: 1s;
   transition-delay: .5s;
   transition-timing-function: linear;
}

/* This could, of course, be shortened to: */
div {
   transition: background 1s .5s linear;
}

The shorthand for defining a transition is fairly lenient, the only requirement for the order being that the delay parameter must be stated after the duration value (but not necessarily immediately after). Furthermore, the transition-duration value is the only one that is actually required for the code to function; and because the default values of the other parameters are adequate most of the time, your transitions seldom need to be anything more than the following snippet:

div {
   transition: 1s;
}

/* This is the same as saying: */
div {
   transition: all 1s 0s ease;
}

But that’s a bit boring. While the defaults are often sufficient for standard hover events and such, if you’re working on something a little more substantial, then the timing function is a serious trick for fine-tuning an animation!

Anyway, you now have an idea of what the timing function does. Let’s look at how it does it.

Looking Under the Hood

Many of you probably don’t look past the available keywords for the timing-function property, of which there are five: ease (the default), ease-in, ease-out, ease-in-out and linear. However, these keywords are simply shorthands for defining the Bézier curve.

The what?!

You might not be familiar with the term, but I’d wager that you’ve actually seen a Bézier curve — heck, if you’ve used graphical editing software, then you’ve probably even created one! That’s right, when you use the Pen or Path tool to create a nice smooth curve, then you’re drawing a Bézier curve! Anyway, to get to the point of this section, the Bézier curve is the magic behind the timing function; it basically describes the acceleration pattern on a graph.

This Bézier curve translates to the ease keyword.

If you’re anything like me the first time I saw a Bézier curve like this, then you might be wondering how on earth that curve could be formed from four points plotted on a graph! I couldn’t possibly tell you in words, but, fortunately, I have a particularly fantastic GIF to do the job for me, courtesy of Wikipedia.

A cubic Bézier curve being drawn (Image: Wikipedia)

Because this curve is formed from four points, we refer to it as a “cubic” Bézier curve, as opposed to a “quadratic” curve (three points) or a “quartic” curve (five points).

Introducing The cubic-bezier() Function

Now then, this is where things get really exciting, as I reveal that you can actually get access to this curve through the cubic-bezier() function, which can simply be used in place of the keywords of the timing-function property value. I appreciate that you may need a moment to contain your excitement…

With the cubic-bezier() function, you can manipulate the Bézier curve whichever way you desire, creating completely custom acceleration patterns for your animation! So, let’s look at how this function works and how it enables you to create your very own Bézier curve.

First, we know that the curve is formed by four points, which are referred to as point 0, point 1, point 2 and point 3. The other important thing to note is that the first and last points (0 and 3) are already defined on the graph, with point 0 always sitting at 0,0 (bottom left) and point 3 always sitting at 1,1 (top right).

That leaves just point 1 and point 2 available for you to plot on the graph, which you can do using the cubic-bezier() function! The function takes four parameters, the first two being the x and y coordinates of point 1 and the latter two being the x and y coordinates of point 2.

transition-timing-function: cubic-bezier(x, y, x, y);

To get comfortable with the syntax, as well as with how it creates the curve and with its physical effect on the animation, I’ll take you through the five timing-function keywords, their equivalent cubic-bezier() values and the resulting effect on the animation.

ease-in-out

Let’s start with the ease-in-out keyword because the logic behind this curve and how it translates to the animation are probably the easiest to understand.

/* The cubic-bezier() equivalent of the ease-in-out keyword */
transition-timing-function: cubic-bezier(.42, 0, .58, 1);

A perfectly symmetrical Bézier curve, which means that the animation will ease in to full speed and then ease out at exactly the same rate.

You can see that point 1 is positioned at 0.42 along the x-axis and at 0 on the y-axis, whereas point 2 is positioned at 0.58 on the x-axis and 1 on the y-axis. The result is a perfectly symmetrical Bézier curve, which means that the animation will ease in to full speed and then ease out at exactly the same rate; hence, the name of this keyword.

If you look at the demo below, you will see the physical effect of the ease-in-out value, as well as how it compares to the other keyword values.

See the Pen bHzqm by Stephen Greig (@stephengreig) on CodePen.

Ease

The ease keyword is the default value of the CSS timing-function property, and it is actually quite similar to the previous one, although it eases in at a faster rate before easing out much more gradually.

/* The ease keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.25, .1, .25, 1);

The curve for the keyword ease eases in at a faster pace before easing out much more gradually.

You can see a sharper incline in the curve initially, while the finish is more drawn out, which directly translates to the physical effect of this timing function on the animation. Don’t forget to refer to the earlier demo after reviewing each of these examples to compare the effects.

ease-in and ease-out

The ease-in and ease-out keywords are, unsurprisingly, exact opposites. The former eases in before maintaining full speed right through to the finish, while the latter hits full speed right off the bat before easing to a finish. The ease-in-out keyword that we looked at previously is, as logic would suggest, a perfect combination of these two Bézier curves.

/* The ease-in keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.42, 0, 1, 1);

/* The ease-out keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, .58, 1);

Bézier curve for the ease-in keyword (left) and the ease-out keyword (right) (Large version)

Linear

The final keyword to address does not correspond to a curve at all. As the name implies, the linear timing-function value maintains the same speed throughout the animation, which means that the resulting Bézier curve (or lack of) would be just a straight line. There is simply no varying acceleration pattern to depict on the graph.

/* The linear keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, 1, 1);

The linear timing-function value maintains the same speed throughout the animation.

If you refer back to the demo, you will probably notice that, despite all of the examples having the exact same duration values, some of the animations appear to be slower than the others. Why is that? Well, to take the ease-in-out keyword as an example, we know that it starts and finishes at a slower pace, which means that it has to cover the middle ground of the animation at a much faster pace. This effectively ensures that we perceive the actual animation to be both shorter and faster, while, say, the linear animation appears longer and more drawn out.

You might feel that this article is very slowly easing into its full pace (see what I did there?), so now it’s finally time to step things up a bit and look at how to use the cubic-bezier() function to create our own custom timing functions.

Creating Custom Acceleration Patterns With The cubic-bezier() Function

Now that we’ve seen how the keywords equate to the corresponding Bézier curves and seen their effect on the animation, let’s look at how to manipulate the curve to create custom acceleration patterns.

You should now be able to plot points 1 and 2 on the graph using the cubic-bezier() function and have a pretty solid idea of how this will affect the animation. However, considering that you’re plotting points on a graph that you typically can’t see, obviously this could get very tedious very quickly.

Fortunately, people like Lea Verou exist, who seemingly won’t rest until CSS development couldn’t be made any easier! Lea has developed the aptly named Cubic Bézier, which is basically a playground for creating completely custom Bézier curves and comparing them in action to the predefined keywords. What this means for you is that, instead of tediously editing the decimals in your cubic-bezier() functions, you can just visit Cubic Bezier and play around with the curve until you’ve achieved the desired effect. Much more convenient.

Lea Verou’s superbly useful Cubic Bézier (Large version)

The shorthand keywords give you great options for timing functions to start with, but the differences between them often appear minor. Only when you start to create custom Bézier curves will you realize the radical effect the timing function can have on an animation.

Just look at the following working examples to see the extreme differences between the animations, despite all of them having the exact same duration values.

See the Pen baFhH by Stephen Greig (@stephengreig) on CodePen.

Let’s take a closer look at the first of these examples and try to understand why it produces such a radically different effect.

/* cubic-bezier() values for first example from preceding demo page */
transition-timing-function: cubic-bezier(.1, .9, .9, .1);

Example of a custom Bézier curve

The main difference between this timing function and the default keywords is the sharp inclines of the Bézier curve against the “progression” scale (the y-axis). This means that the animation progresses in short bursts, with a long gradual pause in the middle (where the curve levels out). This pattern contrasts starkly with what we’ve become used to with the timing-function keywords, which take the opposite approach, with the easing periods coming at the beginning or the end of the animation, rather than in the middle.

With custom Bézier curves now in the bag, surely we have all but exhausted the capabilities of the cubic-bezier() function, right?! You’d think so, but this crafty beggar has got even more up its sleeve!

Getting Creative With Bézier Curves

Yep, it’s true: Bézier curves get even more exciting! Who’d have thought? The scope widens with the revelation that only the time scale (x-axis) is limited to the 0–1 range on the graph, whereas the progression scale (y-axis) can extend below and beyond the typical 0–1 range.

The progression scale is exactly what you’d think it is, with the bottom end (0) marking the beginning of the animation and the top end (1) marking the end of the animation. Typically, the cubic Bézier curve always travels north along this progression scale at varying intensities until it reaches the end point of the animation. However, the ability to plot points 1 and 2 outside of this 0–1 range allows the curve to meander back down the progression scale, which actually causes reverse motion in the animation! As ever, the best way to understand this is through visuals:

A custom Bézier curve using a value outside of the typical 0–1 range

You can see that point 2 is plotted outside of the typical 0–1 range at -0.5, which in turn pulls the curve downward. If you look at the following demo, you’ll see that this creates a bouncing effect in the middle of the animation.

See the Pen kILDb by Stephen Greig (@stephengreig) on CodePen.

Conversely, you could place this backward motion at the beginning of the animation and also make it temporarily run past its intended finishing point. Think of it like taking a couple of steps back to get a running start; then, at the end, your momentum carries you past your destination, causing you to take a couple of steps back to ensure that you arrive at the intended destination. Look at the working example to really understand what we’re talking about here. In addition, the Bézier curve that produces this effect can be seen below.

See the Pen xcCqj by Stephen Greig (@stephengreig) on CodePen.

A custom Bézier curve using a value outside of the typical 0–1 range

You should now have a pretty good idea of how cubic-bezier() values outside of the typical 0–1 range can physically affect how an animation plays out. We can look at moving boxes all day long, but let’s finish this section with an example that clearly demonstrates this type of creative timing function.

See the Pen vbqBh by Stephen Greig (@stephengreig) on CodePen.

That’s right: We’re animating a floating balloon! …What? Haven’t you always wanted to do that with CSS?

The brief for this animation is to “add helium” to the balloon on click so that it floats to the “ceiling,” where it will bounce slightly before sticking to the top, as it naturally would. Using a cubic-bezier() value outside of the 0–1 range allows us to create the bounce and ultimately helps to produce a realistic effect. The following snippet shows the coordinates used in the cubic-bezier() function, and the resulting Bézier curve appears below that.

/* The cubic-bezier() values for the bouncing balloon */
transition-timing-function: cubic-bezier(.65, 1.95, .03, .32);

A custom Bézier curve to emulate a bouncing balloon

This example explains particularly well how the curve translates to the resulting animation because it reflects it almost perfectly. First, you can see that the curve travels from the beginning of the progression scale to the end in a straight line, indicating that the balloon travels from the start of the animation to the finish at a constant speed. Then, very similarly to the balloon, the curve bounces off the tip of the scale and goes into reverse before returning steadily and gradually to the top. All quite straightforward really!

Once you’ve mastered the curve and the art of manipulating it to do what you want, you’ve nailed it.

Timing Functions And Keyframe-Based CSS Animation

One final thing to note before moving on (yes, there is more to cover!) is how timing functions behave when applied to CSS keyframe animation. The concepts are all exactly the same as those in the transition examples we’ve been working with so far, but with one exception that is important to be aware of: When you apply a timing function to a set of keyframes, it is executed per keyframe, rather than for the animation as a whole.

To clarify, if you have four keyframes that move a box around four corners of a square, and you apply the “bouncing” timing function that we used in the earlier balloon example, then each of the four movements would experience the bounce, rather than the entire animation. Let’s see this in action and view the code.

See the Pen rscGb by Stephen Greig (@stephengreig) on CodePen.

@keyframes square {
   25% {
      top:200px;
      left:0;
   }

   50% {
      top:200px;
      left:400px;
   }

   75% {
      top:0;
      left:400px;
   }     
}

div {
   animation: square 8s infinite cubic-bezier(.65, 1.95, .03, .32);
   top: 0;
   left: 0;
   /* Other styles */
}

Note that if the 100% keyframe isn’t defined, then the element will simply return to its original style, which is the desired result in this case, so defining it is not necessary. It is clearly evident from the demo that the timing function is applied to each of the four keyframes because they each appear to bounce off the walls of the container.

If you need certain keyframes to take on a timing function that is different from the others, then go ahead and apply a separate timing-function value directly to the keyframe, as indicated in the following snippet.

@keyframes square { 
   50% {
      top: 200px;
      left: 400px;
      animation-timing-function: ease-in-out;
   }
}

Introducing The steps() Timing Function

Did you think we were done with timing functions? Ha, think again, pal! I told you that there’s a lot more to CSS timing functions than a few predefined easing functions!

For this section, we can swap our curves for straight lines as we explore the concept of “stepping functions,” which are achieved through the steps() timing function.

The steps() function is more of a niche tool, but it’s useful to have in the toolkit nonetheless. It enables you to break up an animation into steps, rather than the usual tweened motion that we’re used to. For example, if we wanted to animate a square moving 400 pixels to the right in four steps over 4 seconds, then the square would jump 100 pixels to the right every second, rather than animating in a continuous motion. Let’s examine the syntax that we’d need for this particular example, which should be an absolute breeze now that we’ve tackled the intricacies of the cubic-bezier() function!

See the Pen Gwbry by Stephen Greig (@stephengreig) on CodePen.

div {
   transition: 4s steps(4);
}

div:target {
   left: 400px;
}

As you can see, it’s a simple matter of stating the number of steps to divide the animation into — but bear in mind that this number must be a positive integer, so no negatives or decimals. However, a second, optional parameter affords us slightly more control, the possible values for which are start and end, the latter being the default value.

transition-timing-function: steps(4, start);
transition-timing-function: steps(4, end);

A value of start would run the animation at the beginning of each step, whereas a value of end would run the animation at the end of each step. Using the previous “moving box” example, the following image does a far better job of explaining the difference between these values.

The difference between the start and end values in the steps() function.

You can see that with a value of start, the animation begins as soon as it is triggered, whereas with a value of end, it begins at the end of the first step (in this case, one second after being triggered).

And just to ensure that this overview is truly comprehensive, there are also two predefined keywords for the steps() function: step-start and step-end. The former is equivalent to steps(1, start), and the latter is the same as steps(1, end).

Creative Use Cases For Stepping Functions

OK, so you probably don’t have much of a need to animate a moving box in steps very often, but there are plenty of other cool uses for the steps() function. For example, if you have all of the sprites for a basic cartoon, then you could use this technique to play it through frame by frame, using just a couple of CSS properties! Let’s look at a demo and the code that makes it function.

See the Pen tuvfp by Stephen Greig (@stephengreig) on CodePen.

div {
   width: 125px;
   height: 150px;
   background: url(images/sprite.jpg) left;
   transition: 2s steps(16);
   /* The number of steps = the number of frames in the cartoon */
}

div:target {
   background-position: -2000px 0;
}

First, we have a small rectangular box (125 pixels wide), which has a background image (2000 pixels wide) containing 16 frames side by side. This background image is initially flush with the left edge of the box; so, all we need to do now is move the background image all the way to the left so that all 16 frames pass through the small rectangular window. With a normal animation, the frames would just slide in and out of view as the background image moves leftwards; however, with the steps() function, the background image can move to the left in 16 steps, ensuring that each of the 16 frames snaps in and out of view, as desired. And just like that, you are playing a basic cartoon using just a CSS transition!

This GIF demonstrates the concept of the background image passing through the “window” in steps, so that each frame snaps in and out of view. (Large version)

Another creative use of the steps() function that I’ve found comes courtesy of Lea Verou (who else?), who has come up with a particularly clever typing animation, which I’ll break down for you now.

See the Pen Blbcs by Stephen Greig (@stephengreig) on CodePen.

First, you need some text, and — unfortunately — you need to know exactly how many characters you’re working with because you’ll need to use this number in the CSS. Another requirement is that the font must be monospaced, so that all characters are exactly the same width.

<p>smashingmag</p>

.text {
   width: 6.6em;
   width: 11ch; /* Number of characters */
   border-right: .1em solid;
   font: 5em monospace;
}

The text we’re working with has 11 characters. With the help of the ch CSS unit, we can actually use this figure to define the width of the paragraph, although we should specify a fallback width for browsers that don’t support this unit. The paragraph is then given a solid black border on the right side, which will become the cursor. Now everything is in place; we just need to animate it, which is extremely simple.

Two separate animations are required: one for the cursor and one for the typing. To achieve the former, all we need to do is make the black border blink, which couldn’t be simpler.

@keyframes cursor {
   50% {
     border-color: transparent;
   }
}

.text {
   /* existing styles */
   animation: cursor 1s step-end infinite;
}

As intended, the black border simply switches between black and transparent and then loops continuously. This is where the steps() function is vital because, without it, the cursor would just fade in and out, rather than blink.

Finally, the typing animation is just as simple. All we need to do is reduce the width of the paragraph to zero, before animating it back to full width in 11 steps (the number of characters).

@keyframes typing {
   from {
      width: 0;
   }
}

.text {
   /* existing styles */
   animation: typing 8s steps(11), 
              cursor 1s step-end infinite;
}

With this single keyframe in place, the text will reveal itself one letter at a time over 8 seconds, while the black border-right (the cursor) will blink away continuously. The technique is very simple yet extremely effective.

Just to add to this excellent use of the steps() function by Lea Verou, reversing the effect and making the text appear to be deleted is also a cinch. To achieve this, just change the keyframe keyword so that it reads to rather than from, and then add an animation-fill-mode parameter of forwards to the set of animation rules. This will ensure that once the text “deletes” (i.e. when the animation has finished), the text will remain deleted. Look at the demo below to see this in action.

See the Pen LmohC by Stephen Greig (@stephengreig) on CodePen.

The downside to both of the examples featured in this section is that you must know the number of frames or characters beforehand in order to specify the right number of steps, and if this number changes at all, then you will need to alter the code as well. Still, the steps() function has shown its worth here and is another fantastic piece of functionality of the CSS timing function.

The Browser Support Situation

We’ve established that you can’t use a CSS timing function unless the browser supports CSS-based animation — namely, the CSS Transitions and CSS Animation (keyframe-based) modules. Fortunately, support is in pretty great shape these days.

Support for CSS Transitions

Browser	Prefixed support	Unprefixed support
Internet Explorer	N/A	10+
Firefox	4+ (-moz-)	16+
Chrome	4+ (-webkit-)	26+
Safari	3.1+ (-webkit-)	6.1+
Opera	10.5+ (-o- prefix)	12.1+

Although all current browser versions have dropped the prefix for transitions (which is awesome), you’d be wise to still include the -webkit- prefix to cater to old mobile browsers. I think the need to include the -moz- and -o- prefixes, however, has passed, as long as you progressively enhance, which you should be doing anyway!

Support for CSS Animation

Browser	Prefixed support	Unprefixed support
Internet Explorer	N/A	10+
Firefox	5+ (-moz-)	16+
Chrome	4+ (-webkit-)	Not supported
Safari	4+ (-webkit-)	Not Supported
Opera	12 (-o- prefix), 15+ (-webkit- prefix)	12.1 only (not supported since switch to WebKit)

Again, for keyframe animations, include only the -webkit- prefix alongside your unprefixed code.

Evidently, browser support for CSS-based animation is in excellent shape, but support is slightly more fragmented when it comes to the nuances of timing functions. The following table explains in more detail.

Support for CSS Timing Functions

Browser	Basic support	cubic-bezier() outside of 0-1 range	steps()
Internet Explorer	10+	10+	10+
Firefox	4+	4+	4+
Chrome	4+	16+	8+
Safari	3.1+	6+	5.1+
Opera	10.5+	12.1+	12.1+

Again, although certain browsers have taken a little longer to support the full range of timing-function capabilities, you can see that support is now universal across current browser versions.

Summary

So, what have we learned about CSS timing functions? Time to recap.

• They define where an animation accelerates and decelerates.
• There is a great deal more to them than just the predefined keywords.
• You can create bounce effects with cubic-bezier() values outside of the 0–1 range.
• You can break an animation into any number of steps, rather than tweened motion.
• Browser support is in fantastic shape and ever improving.

Finally, although these techniques are now supported across the board, this wouldn’t be an article about CSS3 techniques if I didn’t mention progressive enhancement. Always work from the bottom up; that is to say, ensure that your work is acceptable and accessible on devices and browsers that can’t deal with this functionality before enhancing for browsers that can cope with them.

Other than that, go wild! Happy curving and stepping!

Other Resources

• ““Cubic Bézier,” Lea Verou
  A playground for creating and comparing Bézier curves
• “Timing Functions,” Mozilla Developer Network
  A more technical overview of Bézier curves.
• “Bézier Curves,” Wikipedia
  More information

(al, ml, il)

The post Understanding CSS Timing Functions appeared first on Smashing Magazine.

Read 12 remaining paragraphs | Comments

Reading news online over the past year, I came to realize that more or less every story now includes a beautiful woman. Tucked into modules with names like "around the web" or "you might like," there she is, demonstrating her bosom or backside or pearly-white smile. Often she is a celebrity, talking about weight loss, filing a lawsuit, or collapsing onstage. Other times she is a fitness guru, or a fashion expert, or (in at least one case) a "former pole vaulter" who is "still smoking HOT." The women of "Around the Web" are ubiquitous, they are alluring, and they only want one thing — your click.

Continue reading…

No, it wasn't one of the Blizzard devs, but a rather enthusiastic Russian player, Хируко, who managed to unlock every single achievement in World of Warcraft (that's 2057 at the moment) and an extra 205 of the ~300 Feats of Strengths unlocked.

Read more...

Waiting in the epic line for coveted blueberry pancakes from Clinton Street Baking Company is a New York brunching right of passage—one that may soon become less of an ordeal. Bowery Boogie throws out some expansion rumors for the 13-year-old restaurant, indicating they may take over the newly vacant corner lot that formerly housed the Min's Market bodega. [ more › ]

How cheeky: Two Tales, a Prague-based microbrewery that produces a variety of lagers and ales, takes a bold stance here and posits that America's epidemic of sagging pants is the source of the world's most severe economic issues. That's why for every six-pack they sell, they'll also send one belt Stateside in hopes of turning it all around. The idea is a win-win — "You can feel good, while feeling good, about doing good," they say. Beer for Belts even has an online petition, which is only 99,999,954 million signatures short of its goal.

Beer for Belts [Official Site]

Read more posts by Hugh Merwin

Filed Under: video feed, beer for belts, czech republic, two tales brewery

When firefighters have to enter a burning building, much of their job still involves blindly feeling their way through dense plumes of toxic fumes in search of those trapped inside. However, a novel new helmet design could one day give firefighters the ability to see through the smoke and hear beyond the roar of the flames.

Read more...

The embattled founder of VK, Russia's largest social networking site, said this week that the company is now "under the complete control" of two oligarchs with close ties to President Vladimir Putin. In a VK post published Monday, Pavel Durov said he's been fired as CEO of the website, claiming that he was pushed out on a technicality, and that he only heard of it through media reports. According to Durov, the site will now be under the control of Alisher Usmanov — Russia's richest man and the head of web giant Mail.ru — and Igor Sechin, CEO of a state-owned oil company and reportedly a close Putin ally.

"It's interesting that shareholders did not have the courage to do it directly," Durov, 29, wrote on his VK page. VK has more...

Continue reading…

Apple is in the middle of a month-long patent trial with Samsung, and the iPhone maker is taking time out — on Earth Day no less — to dig at its competition. In newspaper adverts that accompany a revamped environmental site, Apple takes clear aim at Samsung while highlighting its green-themed energy campaign. "There are some ideas we want every company to copy," reads the headline of the ad, a clear reference to Apple's aggressive shift to renewable energy. The body of the ad also mentions that "there's one area where we actually encourage others to imitate us."

The ads have been placed in two British newspapers today, The Guardian and the free Metro paper that’s primarily distributed to commuters. While Apple is trying to...

Continue reading…

“Okay, can I take it out of the box now?”

Lytro product director Colvin Pitts wants to show me the camera he’s been working on since 2007. He cautions that it’s just an early model, then gently lifts the stark, black device out of an unmarked box. It looks like a cross between a DSLR and a futuristic weapon. It’s big, with a wide round lens and a large grip, but it weighs less than 2 pounds and is perfectly comfortable in my hands. Its back face is slanted, like someone...

Continue reading…

From Serious Eats: New York

Inside Miss Mamie's. [Photograph: Michelle No]

Few categories of American cuisine are as robust and impervious to fashion as soul food. While dainty small plates continue to take over New York's trendy restaurants and new cuisines arrive at the city's shores on a daily basis, soul food, rugged and meaty and eminently craveable, laughs it all off.

To find the tradition alive and well in New York, you need look no further than Harlem, where fried chicken and mac and cheese are regular restaurant staples. Soul food's influence is so prevalent that you'd need months to try everything the neighborhood has to offer, so we looked to the locals, asking where they go for fried chicken, waffles, mac and cheese, and more.

Miss Mamie's Spoonbread Too

[Photograph: Michelle No]

No one does the classics as well as Miss Mamie's Spoonbread Too. To start, its bestselling Fried Chicken ($16 with two sides) is intensely seasoned, nicely crisp, and generously portioned—you may have trouble polishing off two pieces alone. For dessert there's Peach Cobbler ($6), which, fair warning, is syrupy-sweet, but a salted crust adds some balance.

[Photograph: Michelle No]

Dessert at Miss Mamie's has been enough to bring customers back for more: "I was here when the restaurant re-opened, and all I remember is the dessert and the corn bread," admitted longtime patron Rouchelle Glover, who counts the restaurant as one of her favorites in the neighborhood.

Melba's

[Photograph: Evie Chueng]

If Miss Mamie's is all about the classics, Melba's gets a little more modern. "You. Cannot. Touch. Melba's," we heard from one customer while digging into the restaurant's Fried Chicken and Eggnog Waffles ($15) served with strawberry butter. The crunchy-edged, fluffy waffles get their eggnog flavor from a heavy dose of eggs, cream, and nutmeg.

The dish doesn't come with sides included, so you'll need to order the Mac and Cheese ($5) separately. Al dente macaroni is enveloped in a gooey sauce composed of cheese and buttermilk that's delicious even when it starts to cool.

Sylvia's

[Photograph: Evie Chueng]

Tourists from all over the country come to Sylvia's—buses line up outside the restaurant—but it's retained a strong local fan base. Almost everyone we chatted with in the neighborhood recommended it, and its history and abundantly friendly service are winning draws.

The fried chicken gets plenty of love, but the Barbecue Ribs ($18 with two sides) are also worth a look. The ribs come glazed in a tangy-sweet sauce and give way from the bone with the slightest tug. They're more about braised meat than smoke or spice, but if you're looking to add some heat, Sylvia's house hot sauce complements the tangy tomato glaze nicely.

Amy Ruth's

[Photograph: Zachary Feldman]

Amy Ruth's makes no pretensions to high brow, white-tablecloth sensibilities. The wall decor is worn, the floor is tiled, and red upholstered chairs recall your hometown diner. That familiarity, coupled with an above average menu, keeps the clientele loyal.

Daily specials are named after black celebrities, such as the Al Roker (beef ribs), the Ruby Dee (catfish), and the Rev. Al Sharpton ($12; fried chicken and waffles). The fried chicken comes a little too dry for us, but the trade-off is a shatter-crisp crust, which seems designed to hold up to an optional smothering of gravy that brings some moistness back to the chicken. Those waffles can come with virtually the entire menu from shrimp and pork chops to sautéed apples and bananas.

[Photograph: Zachary Feldman]

Tables are spaced out and the conversational hum is quiet. If Sylvia's styles itself as the neighborhood's queen of soul food, Amy Ruth's is the low maintenance stepsister: not as well dressed, but neighborhood royalty all the same.

Reiterating what the Apple CEO said at last month's shareholder meeting, Tim Cook still wants to "leave the world better than we found it", and nows he's trying harder to deliver on that. Starting today, all of the company's stores will accept any...

It was the clearest statement on the merger from Netflix, nearly two months after it agreed to pay Comcast for a more direct connection to the cable operator’s Internet backbone.

Super Planet Crash is half game, half planetary simulator in which you try to cram as much orbital mass into your solar system without making any of your planets zing off beyond the Kuiper belt. You get bonus points for crowding planets together and locating planets in the star's habitability zone. Warning: I got lost in this for at least an hour the other day.

Tags: astronomy   science   solar system   video games

Samus cruising along in her morph ball by Psuede. See more fan art by Psuede below, including the Winter Soldier:

Read more...

Uncharted 4 won't sound like it did during the brief glimpse we got last year—the actor who voiced the teaser trailer for the next Uncharted game says he's no longer involved in the project.

Read more...

The WSJ:

Square recorded a loss of roughly $100 million in 2013, broader than its loss in 2012, according to two people familiar with the matter.

The five-year-old company paid out roughly $110 million more in cash last year than it took in, according to two people familiar with the matter. Over the past three years, the startup has consumed more than half of the roughly $340 million it has raised from at least four rounds of equity financing since 2009, two people familiar with the company’s performance said.

I’m sure they can make it up on volume.

Jean-Louis Gassée, on the widespread expectation that year-over-year iPad sales have leveled off:

Despite the inspiring ads, Apple’s hopes for the iPad overshot what the product can actually deliver. Although there’s a large numbers of iPad-only users, there’s also a substantial population of dual-use customers for whom both tablets and conventional PCs are now part of daily life.

I see the lull in iPad sales as a coming down to reality after unrealistic expectations, a realization that iPads aren’t as ready to replace PCs as many initially hoped.

In short, Gassée is arguing that tablet sales have hit a wall, and that the iPad needs to grow more Mac-like capabilities for advanced tasks.

Gassée’s piece spawned an interesting thread on Twitter, in which Benedict Evans argued:

Posit: slow iPad sales are worse news for the PC market: implies phones can take the greater share of PC use cases.

I find that compelling. We might have overestimated the eventual role of tablets and underestimated the role of phones — and the whole argument is further muddled by the industry-wide move toward 5-inch-ish phone displays.

Peter Kafka, writing for Recode:

Beats CEO Ian Rogers says the decision to sell within the Apple app was fairly straightforward: More than half of Beats users use iPhones, and it’s very hard to get an iOS user to subscribe if you don’t sell in-app.

Two other music subscription services — Rhapsody and Rdio — have also agreed to sell subscriptions within Apple’s app, though Rdio raised the price for in-app subscriptions from $10 a month to $15 a month to accommodate Apple’s tariff.

But Spotify, which is much larger than all three of the services, hasn’t made the move. Spotify does have a free, ad-supported tier available on its mobile app.

So Apple is making money on music subscriptions even though iTunes itself doesn’t (yet?) offer them.

Talk about chicken little.

In honor of today's vaguely Paleo-approved mash-up rerelease, Kentucky Fried Chicken has done precisely as feared and accompanied the roll-out with something called the Double Down Dare. Essentially, Twitter and Instagram users can expect an onslaught of photo and Vine-jackassery involving the fried chicken menu item all week.

Challenge 1 is centered on the "most creative" Double Down selfie, hashtagged #SelfieDare. Challenge 2 is the best Double Down dance move, but you didn't hear that from us, because it's officially "locked" until 2 p.m. tomorrow. Each round, three winners get a whole $100. The lucky "super fan" who dominates everyone else, however, will receive $500 and a party for 50 friends at the local KFC, where kcals will be poppin', for sure. Other exceptional entries may merit "Bread is dead" T-shirts, so there's that.

Double Down Dare official contest [KFC]
Related: KFC's Double Down Returns April 21

Read more posts by Clint Rainey

Filed Under: everyone wins, double down, kfc, the chain gang

Ooh, I really like the idea of this smartphone card game on Kickstarter: Game of Phones.

One player picks a card and gets to judge that round. They read the prompt to everyone else. Something like 'Find the best #selfie' or 'Show the last photo you took'. Everyone finds something on their phones and shows the judge, who gets to choose a winner for that round. First to win 10 rounds is the overall winner.

This is pretty much what people do when they get together anyway, why not make it a game?

Tags: games   telephony

HBO just announced that Mike Judge's Silicon Valley has been renewed for a second season. The series — which is right now only three episodes into its eight-episode run — has garnered plenty of critical acclaim since its debut earlier this month, so it seems natural the network would want it to return. The new season will likely premiere next spring, but no firm date has been set.

Continue reading…

Google is crossing off a major complaint about Hangouts this week: the messaging app will finally merge your SMS and Hangouts conversations.  Users can pick between Hangouts and SMS when sending a given message, but that's it. There's no option to use Hangouts with SMS as a fallback option, which is the approach Apple takes with iMessage.

Google also promises that "different message types will be easy to tell apart in the conversation," but it's not as obvious as the company lets on. Your received messages all look the same, with only a small "via SMS" label below texted replies. Sent messages easier to tell apart with a glance; they're green when you're sending regular Hangouts messages, and white when sent as an SMS message. Users...

Continue reading…

GitHub, the company behind the popular open source platform of the same name, just announced that co-founder and president Tom Preston-Werner has resigned after an independent investigation into claims that he and his wife harassed an employee.

Preston-Werner was not explicitly named until now. However, most people had figured out that he was the "co-founder" referred to by former developer Julie Ann Horvath, who quit last month due to what she says had become a hostile work environment.

Horvath claimed to have experienced sexism and gender-based harassment at GitHub. She also spoke out about Preston-Werner and his wife, who she says personally harassed her for two years, the former berating her in his office and the latter stalking...

Continue reading…

Less than two weeks ago the first rumors surfaced that Pearl Paint on Canal Street was shuttering, and by the end of last week the store did indeed shut its doors. It was a tearful goodbye, according to the Tribeca Trib. [ more › ]

No.

The 1964 World's Fair opened 50 years ago tomorrow — April 22 — and among its many cultural contributions, it's fondly remembered as the place where Americans first got to try crisp, delicious, deep-pocketed Belgian waffles, topped with whipped cream and hand-sliced strawberries. As one fairgoer recalls in the Times, "no Belgian waffle has ever seemed as good to me as the ones at the fair." The biggest waffle innovation of 2014? A new line of mini Eggos that taste like fake syrup and come in microwave bags. This isn't progress. [AP, NYT]

Read more posts by Alan Sytsma

Filed Under: the passage of time, eggo, waffles

Evacuation ships that appear at the end of matches are always targets in Titanfall—and usually, destroying these ships simply results in more points for the attacking team. Usually is the key word here.

Read more...

Stephen Colbert celebrated his Late Show deal with a blow-out meal at Carbone on Friday night. The late night funnyman dined at the Thompson Street hot spot with his wife, new boss Les Moonves, and another couple. [Page Six]

Two men in Pennsylvania helped thousands of Comcast customers lower their monthly bill through an illegal scheme, and now they're going to jail because of it. For more than a year, Alston Buchanan and Richard Spraggins discreetly took payments between $75 and $150 from 5,790 local Comcast subscribers. In exchange, they shaved down the monthly fees that each customer owed, ultimately robbing the cable and internet provider of $2.4 million. Buchanan and Spraggins allegedly paid off a Comcast employee to obtain login credentials that gave them direct access to the company's billing system.

Unfortunately for both men, their operation lacked forethought and any semblance of careful planning. They combed the streets for potential clients,...

Continue reading…

Tom's Cat Cafe, Seoul. [Photo: feline_dacat/Flickr]
Pet food brand Purina ONE is opening a pop-up cat café at 168 Bowery this Thursday. For those unfamiliar, a cat café is a coffee shop populated with cats for customers to play with. It's all the rage in Japan and Europe, and enterprising cat-lovers in San Francisco, Oakland, Portland, LA, Vancouver, and Toronto are racing to open cafés of their own. But with this pop-up, New York will become the very first North American city to actually get a cat café.

The Purina ONE Cat Café will be open only from Thursday, April 24 through Sunday, April 27. The cats on the scene will all be adoptable, and the coffee, according to Sprudge, will be provided in part by an unnamed "well-regarded speciality coffee roaster based in Brooklyn."
· Purina is Popping Up a Cat Café in Manhattan [Sprudge]
· All Coverage of Cat Cafés [~EN~]