random bits of web, life & mobile goofiness
It's thursday and we should all enjoy a little laugh before the week ends (and not the week-ends).
Give it a second, it's going to space !
Sources: Thanks to Brad Frost for showing this clip at Ready to Inspire'12.
Today it's video time. Here goes my freaking awesome trailer:
ps: 'use your world war veteran voice to read it'
In a world where 35% of the internet is used by Netflix,
where our brain is slowly melting due to information overload
but a day is still made of 24 hours,
comes a man with a space helmet
For those who do not have the time to sit through this inspirational talk, here's the memo. Yeah go on click it, it's ok, I won't holt it against you, or will I ?
Don't click me.
Sources: Thanks to Brad Frost for all his awesome writings and shares.
Antoine de Saint-Exupery got it right with:
“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”
Now how do we get this done would you ask ? Well very simply my dear friend.
There are two ways to create css animations, keyframes and transition. Today we will look at keyframes. Why ? Because we have to start somewhere do we not ?
First declare a
@keyframes in your css and name it with a fancy name. Then using % steps and css properties define your keyframe values:
As this post is about tips and not sparkles, here goes the tips: you can use
to to replace respectively
And now if we want to add another keyframe, easy peasy:
Now that our animation is ready let's apply it to some DOM elements. We do this by adding custom properties to a css object. Imagine we have this line of html:
Then the css bits to make it sparks is as follow:
Because you are awesome I went straight with the minimized version but it is allways good to know what are the available possibilities, so for those at the back:
animation-name: in our case sparkly.
animation-duration: a time in seconds eg. 2s.
animation-iteration-count: a number eg. 2, or infinite to make it loop.
animation-direction: should we play it from 0% to 100% or backward eg. normal or alternate (default to normal).
animation-timing-function: how should the time behave eg. ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2).
animation-delay: a delay time in seconds eg. 2s.
animation-fill-mode: a bit tricky to explain so bear with me or try it out. Now imagine a white div block with an animation of background from red to blue that run twice and for 2s each with an ease-in function,
eg for keyframes:
and for animation:
Now it works fine but what if we wanted to keep that blue color at the end and not see it goes back to white ?
Then we would use this
animation-fill-mode, forwards keeps the end value after the animation completes, backwards keeps the initial value before the animation starts (visible only when coupled with a delay), both does both (did you guessed it ?) and none is the default.
Wow that was a bit longer than what I expected but hey, what the heck !
By the way you can combine animations:
Till' next time !
When designing or mocking a new app how should you adress to your user. Maybe you could refer to him as a “your” but wouldn't “my” fit better ? eg. in a profile view: “your profile” or “my profile” ? Read on!
We use tools as extentions of our own body. When we use them for a while we start integrating them as part of our body. For exemple a recent experiment on human showed that when presented with a fake arm (using mirror tricks) patients where subjected to pain when researchers poked their fake limb. Awesome!
Calling a part of your interface “mine,” as though it already belongs to your user, makes sense, because his brain allready considers it a literal extension of himself.
On the other hand if we think of interface as a medium instead of a tool than we give them the qualities of a person. I am talking with “you” (my app) to contact other “you” (friends or family). In a real case scenario this could mean asking for direction to a stranger in order to find your way to some party you marked as attending on fb.
If you think of your app in term of a tool than you should go for the “my” (eg. google maps) otherwise go for the “you” as it grants more personality and meaning to your app.
Source: Thanks to Dustin Curtis.
Thanks to an old friend of mine i was able to visit Brussels as a local and not as a tourist. I really enjoyed my time there and I am looking forward to come back and have some more beers!
“C'est drôle, les cons ça repose,
C'est comme le feuillage au milieu des roses...”
Barbara Ballard does a great job explaining the idea behind mobile:
“Fundamentally, ‘mobile’ refers to the user, and not the device or the application.”
A device pixel (or physical pixel) is the tiniest physical unit in a display. Each and every pixel sets its own color and brightness as instructed by the operating system.
A CSS pixel is an abstract unit used by browsers to precisely and consistently draw content on Web pages. On standard-density displays, 1 CSS pixel corresponds to 1 device pixel.
Screen density refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI).
window.devicePixelRatio can be used to obtain the ratio (limited support atm).
In css use this media query:
A bitmap pixel is the smallest unit of data in a raster image.
Beside its raster resolution, an image on the Web has an abstract size, defined in CSS pixels. The browser squeezes or stretches the image based on its CSS height or width during the rendering process.
When a raster image is displayed at full size on a standard-density display, 1 bitmap pixel corresponds to 1 device pixel, resulting in a full-fidelity representation. Because a bitmap pixel can’t be further divided, it gets multiplied by four on Retina displays to preserve the same physical size of the image, losing detail along the way.
To serve retina content to user, upload twice the size of pixels than resize it. eg. for a 200 × 300-pixel image uplaod a bitmap resolution of 400 × 600 pixels
@media: see before
Sources: Thanks to Smashing Magazine.