clenemt

random bits of web, life & mobile goofiness

Apr 14, 2013

Long time no seen !

Here it's me making progress on my nodejs environment. Debugging with node-inspector. Oh yeah !


Sources: node-inspector.

Feb 28, 2013

It's thursday and we should all enjoy a little laugh before the week ends (and not the week-ends).

Louis CK is a great comedian that I first saw in Parks and Rec. He allways gets it right when he starts talking about technology.

Give it a second, it's going to space !


Sources: Thanks to Brad Frost for showing this clip at Ready to Inspire'12.

Feb 27, 2013

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
Brad Frost

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.

Feb 22, 2013

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”

Antoine de Saint-Exupery
Feb 13, 2013

I'm sure you all know that doing javascript animation is now a thing of the past. As developers we now have a better tool at our disposal: css.

Animation in the wild

When using css transitions we are getting out of the javascript runtime to leverage the GPU power of the device. This is a significant gain as we will see below (especially on mobile devices).

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 ?

@keyframes

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 from and to to replace respectively 0% and 100% eg.

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 !


Sources: Thanks to CSS tricks, Mozilla dev and Brad Shaw.

Feb 13, 2013

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!

My

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!

Google Maps iOS!

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.

Your

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.

Instagram iOS!


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.

Feb 12, 2013

Brussels shadow !

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...”

Arnaud Jamar
Feb 7, 2013

Barbara Ballard does a great job explaining the idea behind mobile:

“Fundamentally, ‘mobile’ refers to the user, and not the device or the application.”

Barbara Ballard
Feb 5, 2013

Before we dive in

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).

How to find the ratio device pixel / css pixel?

In js, window.devicePixelRatio can be used to obtain the ratio (limited support atm).

In css use this media query:

Bitmap pixels

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.

HTML And CSS Sizing

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

With HTML:

With css:

HTML AND CSS SIZING: PROS

  • Easy to implement
  • Cross-browser compatible

HTML AND CSS SIZING: CONS

  • Non-Retina devices have to download larger assets.
  • Downsampled images might lose some of their sharpness on standard-density screens, depending on the algorithm used.
  • The background-size property is not supported in IE 7 or 8.

With js and window.devicePixelRatio:

js: PROS

  • Easy to implement
  • Non-Retina devices do not download large assets.
  • Pixel-precise control

js: CONS

  • Retina devices have to download both standard- and high-resolution images.
  • The image-swapping effect is visible on Retina devices.
  • Does not work on some popular browsers (such as IE and Firefox).

With @media: see before

@media: PROS

  • Devices download only those assets that target them.
  • Cross-browser compatible
  • Pixel-precise control

@media: CONS

  • Tedious to implement, especially on large websites.
  • Displaying content images as backgrounds of other HTML elements is semantically incorrect.

Alternatives

With svg:

or with css:

SVG: PROS

  • One universal asset for all devices
  • Easy to maintain
  • Future-proof: infinitely scalable vector graphics

SVG: CONS

  • No pixel precision due to anti-aliasing
  • Unsuitable for complex graphics due to large file sizes
  • No native support in IE 7 and 8 or early Android versions

icon-fonts:

and voila:

Farewell.


Sources: Thanks to Smashing Magazine.