Page / User State | Logged Out | Logged In |
---|---|---|
/public-page | Go to /public-page | Go to /public-page |
/page-requiring-auth |
|
Go to /page-requiring-auth |
/login |
|
Redirect to / |
/logout | Redirect to / |
|
height: 760 | |
license: gpl-3.0 |
function retry(isDone, next) { | |
var current_trial = 0, max_retry = 50, interval = 10, is_timeout = false; | |
var id = window.setInterval( | |
function() { | |
if (isDone()) { | |
window.clearInterval(id); | |
next(is_timeout); | |
} | |
if (current_trial++ > max_retry) { | |
window.clearInterval(id); |
As soon as I saw the new YouTube Player and its new morphing play/pause button, I wanted to understand how it was made and replicate it myself.
From my analysis it looks like YouTube is using [SMIL animations][1]. I could not get those animations to work on browsers other than Chrome and it appears [that they are deprecated and will be removed][2]. I settled for the following technique:
-
Define the icon
path
elements inside adefs
element so that they are not drawn. -
Draw one icon by defining a
use
element whosexlink:href
attribute points to one of thepath
s defined in the previous step. Simply [changing this attribute to point to the other icon is enough to swap them out][3], but this switch is not animated. To do that, -
Replace the
use
with the actualpath
when the page is loaded.
JScript to find album covers that measure less than 1000x1000 px. Perfect for those who like to manage their large music libraries.
The purpose of this gist is two-fold:
-
Demonstrate how to animate between scales;
-
Show how data visualization depends on the chosen scale.
For example, we can see how some data clusters using the power scale. The datums
1
and10
are rendered on the same spot. If we had a lot of these points close to each other and performance was a concern, filtering out some of these points could prove valuable.
JScript to find broken tracks that iTunes can no longer find. Perfect for those who like to manage their large music libraries.
One confusing aspect of animating bars (and working with SVG in general) is that the coordinate system origin is at the top-left corner, which means that y
increases downwards.
One would expect that to animate a bar diminishing in size ("going down") changing the height
attribute would be all that's needed. However that's not true. This is a visual explanation of why it's necessary to animate both y
and height
attributes.
Another solution would be to surround the bar with a clipPath
element and then transition the bar down. This way, everything on the inside of the clipping area is allowed to show through but everything on the outside is masked out.
This other approach would only work for a simple bar chart though. For a more complex, animated stacked chart, animating both y
and height
attributes is the only solution.
date | Airbus | Boeing | |
---|---|---|---|
2000-07-31 | 0 | 0 | |
2000-08-31 | -0.884 | 9.8912 | |
2000-09-29 | 9.6685 | 32.1383 | |
2000-10-31 | 32.5967 | 38.9245 | |
2000-11-30 | 33.1492 | 41.4853 | |
2000-12-29 | 30.7182 | 35.2113 | |
2001-01-31 | 27.0718 | 19.8464 | |
2001-02-28 | 24.3094 | 27.4264 | |
2001-03-30 | 16.0773 | 14.1306 |
# gem install benchmark-ips | |
require "benchmark/ips" | |
path = "lib/rubycritic/cli/options.rb" | |
Benchmark.ips do |x| | |
x.report("read + each_line") { File.read(path).each_line.count } | |
x.report("open + each_line") { File.open(path, "r").each_line.count } |