Kerning on the Web

Via: blog.typekit.com

After kerning is going to be turned on by default in new browser's versions Bram Stein wrote an article in the Typekit blog about what kerning is and how to use it already today with some simple CSS3 commands:

Imagine each character in a string of text has a box drawn around its outer edges. Without kerning, characters would line up at the edges of these boxes. Kerning enables these edges to overlap so the space between each character can be adjusted to be tighter or looser.

http://supercode.co/s/4d7

New Design Trend: The Scroll Up Bar

Via: usabilitypost.com

A design pattern that is currently growing more popular is the fixed position bar at the top of the page. Sometimes the bar stays the same throughout, sometimes the header morphs into a slimmer bar as you scroll down, sometimes a completely new bar appears.

It looks like there is a new design trend rising. I think the first time I saw it out there in the wild was on The Verge some months ago. It's not as fancy as the new bar on Medium for example but it's quite nice anyway.

Here is as an example the bar on VICE News:

A tutorial on how to caputre screen casts as .gif will follow.

http://supercode.co/s/4af

Web Animations - element.animate() implemented in Chrome 36

Via: updates.html5rocks.com

Great news for JavaScript developers: Web animations are finally implemented. At least into 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. [...]

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

It looks like it shouldn't be that hard to use them. Especially not if you already did some animations with jQuery or CSS3:

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

Here is a really good and complete example of how to animate snow flakes for example: jsbin.com/rewev/

http://supercode.co/s/4aa

ProcessDiagnostics

Via: processwire.com

ProcessDiagnostics is a module made for the CMS/CMF Processwire. It adds a "Diagnostic Page" to the ProcessWire backend which displays e.g. potential security risks (like wrong file permissions or left install files) and the server configuration settings (PHP version, User Agent, etc.). It looks like this:

The module is currently WIP so neither the design nor the displayed informations are safe in the final build. But that's what makes it great: It's one of the first modules which is build in - not for - the community. Originally created as a really lightweight skeleton and as a Proof-of-Concept by Steve, ProcessDiagnostics is now open for the community and everybody can add stuff he or she thinks is important. (My part is about checking if all of the modules are up to date.) And I think it's going to be a great module.

You can follow the conversation here.

http://supercode.co/s/4a1