Federico Weber

Quantum Computers Explained

2015-12-10T17:03:00+01:00

Quantum computing and the limits of Human technology explained by the exceptional Kurzgesagt team.

Volvo Trucks - Look Who’s Driving

2015-12-05T11:16:00+01:00

This is brilliant: Volvo test the toughness of it’s latest FMX truck letting a four year old girl drive it ( with the safety of a remote controller ).

Turns by Breakwater Studios

2015-12-04T15:21:00+01:00

A fantastic portrait of master woodturner Steven Kennard, and his fantastic work.

Social network illustrated by Ivan Belikov

2015-12-03T18:11:00+01:00

Fantastic series of illustrations potraiting social networks by Ivan Belikov

10 Years Of Daylight and Darkness Visualized

2015-11-30T18:08:00+01:00

For its annual “Light Calendars,” London-based design studio Accept & Proceed visualizes the fluctuating length of daylight for each passing year with a series of stunningly detailed black and white prints

Adidas futurecraft leather

2015-11-11T20:31:00+01:00

Adidas milled one continuous piece of leather, to various thickness, to form the upper of this shoe.

Op – experimental optical film

2015-10-30T16:32:00+01:00

by: Giovanni Rodriguez

Setting the website typography with webfonter

2015-10-24T12:41:00+02:00

Just discovered fontshop Webfonter Chrome extension. A neat solution to browse and experiment with the shop extensive catalog, directly on the website you are building. Among the various features it supports: custom CSS selectors and save the configuration in the Local Storage.

100 day calligraphy challenge

2015-10-21T14:37:00+02:00

A couple of years ago I started learning to write in Italic. But after the initial period of dedicated study, I practiced it less and less. To get better at it, I decided to start a 100 day calligraphy challenge. You can follow my progress in instagram.

Ghost in the shell, Identity in Space

2015-10-17T10:35:00+02:00

“all things change in a dynamic environment, your effort to remain as you are is what limits you”

Reddit AMA animated logo

2015-10-14T11:48:00+02:00

Intro design and animation for Reddit’s new AMA video series by David Stanfield

A pretty scroll hijacking

2015-10-13T15:39:00+02:00

Usually, I’m not that in favor of scroll hijacking, but have to admit that ginventory.co is pretty.

Wanderers

2015-01-01T01:00:00+01:00

“As for me, I am tormented with an everlasting itch for things remote. I love to sail forbidden seas, and land on barbarous coasts.”

Wanderers - a short film by Erik Wernquist

Migrating from Amazon EC2 to Nodejitsu PaaS

2013-02-10T01:00:00+01:00

Last year I decided to renew my website, and cause I was also studying Node.js I decided to develop from scratch the publishing platform—you can read more about it in here—and self host it on Amazon EC2 to get a grip on the platform.

As my first attempt to self manage a server, setting up the EC2 instance was far from an easy task for me. It took me a couple of days of studying official documentation and tutorials to successfully setup the EC2 instance, deploy Gestalt via GIT and have the server run it as a demon.

During this time, while Gestalt grown in capabilities and performance, I discovered myself to be a terrible SisAdmin. Therefor when I received the notification that my free tier was about to expire I quickly decided to migrate everything to a managed platform where my only concern would bee to work on the Gestalt.

Looking for the perfect match for my needs I decided to give a try at Nodejitsu’s Platform as a Service (Paas)—being attracted from their convenient fees, with the cheapest plan, for individuals, starting at $3 a month. Prepared for a long and painful migration I created an account studied their documentation, installed jitsu CLI via npm and in less then 10 minutes Gestalt was running smoothly from their servers. Once I’ve been sure that everything was stable I update the DNS records and shutted down the EC2 instance.

It’s early for me to comment on their service reliability, but with such a pleasant startup I can not help but recommend their service.

During this time (from February 28 2012) I’ve been able to use their services for free leveraging the Free Tier Period

The New Disruptors

2012-12-14T01:00:00+01:00

Hosted by Glenn Fleishman, The New Disruptors is brilliant weekly podcast, on Mule Radio Syndicate, that investigate the new economy of Makers and Crowdfunding.

Unfortunately the audio quality is poor(that was true at the time of writing 12/14/2012 but audio quality of the new episodes is remarkable), but the content is remarkable and the pace is engaging. If you are into self-production you must subscribe to this podcast.

Firefly, a skateboarding movie shooted with a drone

2012-12-12T01:00:00+01:00

Smart images responsive crop with CSS3

2012-12-04T01:00:00+01:00

Explore the source code on Github

[github]https://github.com/adamdbradley/focal-point#readme

Behind The Scenes of Crysis 3

2012-12-01T01:00:00+01:00

Rain Room at the Barbican

2012-11-20T01:00:00+01:00

Rain Room is a hundred square metre field of falling water through which it is possible to walk, trusting that a path can be navigated, without being drenched in the process.

A simple yet amazing concept well executed by Randon International. This is truly the kind of experience in which technology become magic.

My quest to Pogonotomy

2012-11-18T15:48:58+01:00

The art of wet shaving

My father taught me to shave with a Bic disposable razor and canned foam when I was 14; and for my 16th birthday I received as a present from Gillette, a free Mac3¹ that become my shaving razor for almost a decade. The experience of shaving with it was far from ideal, my neck used to be filled with ingrown hairs and razors burns and I grow up believing that I’ve been cursed with a delicate skin.

Electric shaving

For Christmas of 2008 my parents gifted me an electric shaver, a shining multi-purpose Braun Cruzer3. As awesome as it look this shaver can be really useful for trimming and refining intricate beard styles but, being almost beardless, I used that to completely shave myself. The shaving experience with the Cruzer3 have been, if possible, even worst. I’ve kept using it for almost six months, hoping that my beard will adapt, before giving up.

More blades are better

On that time I decide that my old Mac3 already got enough miles and I bought a Gillette Fusion² and switched to shaving gel in place of the canned foam.

I must admit that the overall shaving experience improved quite a bit, but the shaving costs grown out of control. To prevent razor burns I had to replace the shaving head every two week, and with a costs of €4,50 each, my beard used to cost me almost €100 a year in blades.

Shaved by a professional

On october of 2011 my wife got pregnant and we decided to move to a proper³ apartment in the city center. On the new neighborhood we discovered a small barber shop whose owner, a gentle man from Naples on its 70’s, use to provide old manner shaving service with a Shavette razor⁴, pre-shave balm and hand mounted foam. That have been by far one of the best shaving experience at that point, and settled the benchmark for all of the following ones. The shaving foam was soft and warm and the razor glided over my tightened skin producing a resolute sound while trimming the whiskers. The result was a smooth and relaxed face on which the beard refused to grown back for the following three days.

The Straight Razor

After that experience I’ve grown interested in Straight Razors⁵, and with my great pleasure, my Father in Law, in accord with my Wife, gave me as a present, for my 29th birthday, a huge 7/8 Straight Razor from Filarmonica⁶ and a leather strop. My first shave with that razor was a mess, I recursively cutted my self badly, and my skin was so sore that I’ve been not able to shave for almost a week. The experience was so bad that I almost give up, but the memories of that one amazing shave I got in that small barber shop in Milan persuaded me to endure on the path.

Going pro

After that first terrible shave it’s passed almost one year. In this time I bought a smaller, shave-ready, razor(5/8 roundpoint Astrale from Dovo); learned how to prepare my face, lather the shaving cream; and take care of my razor.

Now days razors burns and ingrown hairs are distant nightmare, I rarely cut myself and I’m able to achieve a wonderful shave that is almost on par with the one I got in that barber shop. But more important than that is the transformation of a painful daily routine in an awesome ritual that I enjoy twice a week and I’m on a long life path to hone my skills in the art of pogonotomy.

If you liked what you read please follow me on Twitter or ADN.

The Gillette Mach3 is a line of safety razors produced by Gillette and introduced in 1998 after more than $750 million in research and development costs. Gillette used to ship free Mac3 razors as an advertisement around 1999. Source ↩
The Gillette Fusion is a five-bladed razor released in 2006. The Fusion has five blades on the front, and a single sixth blade on the rear for precision trimming. ↩
We used to live in a nice multi level loft in the suburb, and we were imagining our baby jumping out from the open first floor as soon as she start crawling around. ↩
A Shavette is a straight razor that takes disposable blades. This is the kind of razor barbers use over a straight razor for hygienic reasons. ↩
A straight razor is a razor with a blade that can fold into its handle. They are also called open razors and cut-throat razors. Source ↩
I later discovered that the brand was a prestigious one from Spain. But it closed out around 1990 and the Razor I got is currently produced in some unknown factory, with an unknown blend of steel and it’s almost impossible to hone. ↩

Super Retina display

2012-11-09T01:00:00+01:00

Japan Display has developed a prototype 651ppi LCD panel. First announced in June 2012, this display has a resolution of 1280x800 pixels, equivalent to that in a regular notebook PC, but in a screen size of only 2.3 inches

Now imagine an iPad mini equipped with one of those.

The art of making

2012-10-08T02:00:00+02:00

Validating your Local Storage Data

2012-10-01T02:00:00+02:00

Local storage is a powerfull tool to cache data computed by web apps for later reuse or non critical persistency¹. For example I do used it on a recent project, to reduce both the data loaded from the server and the computational cost of sorting a huge list of articles by filters.

Cause the local storage will persiste on the browser for a long time to safely use this data we have to be sure that they are reliable and up to date. Usually the data can get useless for two main reasons: they are based on data produce by the server, that has been updated; or they have been stored by a previous version of the web app which data model have long changed.

Getting the timestamp

To check the data against the server a good option is to have it provide a timestamp² for the latest time the data have been changed.

If the web page, is rendered by the same server we are getting the data from, we can pass this information around as a Custom data attributes in the DOM element that hold the app.

<div id="appHolder" data-timestamp="2012-10-02T20:17:08.780Z"></div>

Otherwise, if the data are coming from a different server, we can get the information as a lightweight JSON.

{"updated": "2012-10-02T18:30:30.179Z" }

Versioning your web app

To match the data against an updated version of your app the best option is to have a the version number as constant in your app namespace, and save it with your data on the Local Storage.

myApp = {}; myApp.VERSION = "0.0.4";

Wrapping it up

It’s best to run this test as soon as the app is inited, if both of this test succeed you are usually safe to trust the stored data, otherwise it’s reccomended to recreate it.

With non critical persistency I intend any kind of data that can be reconstructed without causing damages or requiring serius effort from the end user. Like a precompiled set of filters for a search.

Although not mandatory I reccomend you to store this data in the ISO format “2012-10-02T20:17:08.780Z” to better reuse it in javascript passing it as an argument of a new Date object. ↩

Front end middleware with Backbone and PantaRhei

2012-09-25T02:00:00+02:00

A middleware primer

The first time I’ve stumbled upon the middleware pattern it was in Express.js, while developing the backend for Gestalt.

The concept of middleware it’s quite straight forward, it’s nothing more than a function that handle a request. What make it so interesting is the possibility to create a stack of middleware. By doing so each middleware will be able to process the request, and call the next one in the stack.

A typical middleware will look like this:

var foo = function(req, res, next) {
    // all your logic goes in here

    // proceed to the next middleware
    next();
};

If a middleware have to signal an error, it can do so passing it to the first argument of the next().

var bar = function(req, res, next) {
    // signal an error
    next( "Something went wrong!" );
};

To append a stack of middleware to a request in Connect you have to declare them with the use method¹.

// Example from http://www.senchalabs.org/connect/
var app = connect()
    .use(connect.logger('dev'))
    .use(connect.static('public'))
    .use(function(req, res){
        res.end('hello world\n');
    })
    .listen(3000);

What I really like about this pattern is that by simply reading the use stack you can get a grip on the logics behind the application. Also structuring your application as a cascade of middleware you are encouraged to split it in small, self contained, modules and avoid nasty callbacks. With the added benefit of a enhancing both the readability maintainability of your code.

Introducing PantaRhei.js

PantaRhei.js is my front end implementation of the middleware pattern . I structured it as an extension for Backbone.js because it is awesome, I’m using it on the wast majority of my projects, and I want to leverage it’s Events module and the simple inheritance style provided by the extend() method.

PantaRhei is written in CoffeeScript and distributed with the MIT license. You can find the coffeescript sources and the compiled and minified javascript files on Github.

The purpose of PantaRhei is to ease the creation and the execution of queues of tasks, like fetching and manipulating data, managing the transitions between pages and so on. Right now PantaRhei is composed by two modules: the Flow, that is responsible for the execution of the queue and the Worker, that describe one of the possible structure of middleware² that the Flow can handle.

The Worker

The Worker module is more a convention than a real module, and it’s meant to be extended. It describe two methods: the former is the run it’s invoked by the Flow to execute the worker and accept a shared object ( which purpose is to act as a place for workers to share data ) and the next callback as arguments; the latter is the kill, that is invoked by the Flow when the worker execution is completed to safely remove it. The worker constructor also accept an option id as an argument.

To create a new Worker you need to extend it and implement it’s methods:

var Delay = PantaRhei.Worker.extend({
    constructor: function(duration, id){
        this.duration = duration;
        this.id = id;
    },
    run: function(shared, next) {
        onTimeout = function(){
            next();
        };
        setTimeout(onTimeout, duration);
    },
    kill: function(){
        // all your logics to remove the worker
    }
});

var shortDelay = new Delay(1000, 'shortDelay');

PantaRhei also include, under the PantaRhei.workers namespace, a series of workers³ JsonLoader and LoadAssets.

The Flow

The Flow module is our middleware manager, and handle for you all the logic to create and run the queue. To create a new flow all you have to do is to call it’s constructor and optionally pass two parameters: an id and a array containing the list of workers to use.

var flow = new PantaRhei.Flow( 'myFirstFlow', [task1, task2] );

You can also append a worker to the flow passing it as an argument of the use method.

var task1 = function(shared, next){
        console.log( "task one completed" );
        next();
    },
flow =  new PantaRhei.Flow( );
flow.use(task1);

To execute the flow you have to invoke the run method. The flow can also accept an optional shared object. This is passed around to all the workers in the queue and it’s returned by the flow on complete, it’s actually the place for storing and passing data between workers. If this is not provided the Flow will create a empty object to use.

// create our workers
var task1 = function(shared, next){
    shared.data = "the data have been processed"
    next();
},
task2 = function(shared, next){
    shared.newData = "we got some new data for you"
    next();
},

// create our flow and workers passing the first task on the constructor
flow = new PantaRhei.Flow(  'myFirstFlow', [ task1 ]);

flow
    // append the second task
    .use( task2 )
    // run the flow
    .run({data: "the data is new"});

Events

PantaRhei make use of the Backbone Events, so the Flow can dispatch the following events: run, pause, resume, error and complete. Apart from the error all the other events pass the shared object as an argument to the listener. So to get notified when a flow have been successfully executed you can catch the complete event. “`javascript var onComplete = function( shared ){ console.log(shared); };

flow .on( ‘complete’, onComplete) .run(); ”`

Error handling

PantaRhei leave the responsibility to properly handle the errors to you. If any of the worker in the queue pass and error to the next callback, the Flow is paused and dispatch an error event. Once you have done with the error handling and you are ready to resume the flow you can call the resume method to move to the next worker in the queue.

var onError = function( err ){
    //handle the error in here
    this.resume();
};

flow
    .on( 'error', onError)
    .run();

The other one is a simple function that accept as arguments the shared object and the next callback.

If you are looking for an introduction to the use of middle wares in Connect I suggest you to check this short guide written by Stephen Sugden. ↩
More to follow soon. ↩

Kickstarter is not a store

2012-09-21T02:00:00+02:00

Recently there have been a lot of disillusionment about a series of successfully backed Kickstarter projects who failed to ship. Therefor Kickstarter decide to clarify their position and enforce a new series of rules especially targeted to physical product.

It’s hard to know how many people feel like they’re shopping at a store when they’re backing projects on Kickstarter, but we want to make sure that it’s no one. Today we’re introducing a number of changes to reinforce that Kickstarter isn’t a store.

While the Risks and Challenges section is a correct move, I have mixed feelings about the new measures for Hardware and Product Design projects. Surely demanding a working prototype is a step in the right direction, but completely prohibit the 3D rendering is a poor choice. And neither of this help backers to understand if the product they are going to support can be realistically manufactured.

Working prototype

A working prototype is a necessary step for the creators to figure out how o produce a real product out of their amazing concept. But it’s not enough to assure the backers that it’s actually possible produce the same product in large quantity, leveraging industrial facilities, neither it’s a good estimation of the real production costs—which can also vary by a significant amount based on the number of peaces that are going to be manufactured.

Especially for complicated products that require a combination of different technologies and draconian manufacturing and distribution lines¹.

Renderings and simulations

The case against rendering is a complete non sense to me. Simulations and renderings are powerful tools for creators both to design and iterate the product and to show the backers what the product it’s going to look like and the possible colors and trim customizations.

Is founding cap an option?

An interesting point Kickstarter raise in their post is to fix to one the amount of quantities that a project can offer to a single backer.

Offering multiple quantities of a reward is prohibited. Hardware and Product Design projects can only offer rewards in single quantities or a sensible set

This kind of choice make sense considering that over a certain amount of product to produce it could become necessary to reconsider the entire manufacturing line—that could not be convenient probably till a new order of magnitude is reached—and keep manufacturing the product using a line produced for smaller quantity is not always possible or desirable.

This kind of consideration also open the road to another possibility, a founding cap. Clearly this is not something Kickstarter should force to the product, most of the projects founded don’t have real issues with over founding, but could be a nice option that the creators can decide to adopt.

Even better would be to have progressive founding goals; it’s quite a common practice, for creators, to promise increased sets of features based on the amount of money (over the initial founding goal) the project manage to raise². Kickstarter could officially support this kind of initiative by charging late bakers only when the next goal is reached.

I do honestly doubt that the Ouya will ship in time for Mar 2013. ↩
The Planetary Annihilation project had an interesting take on this, adding game enhancements and orchestral sound track. ↩

My new tailor made leather bag

2012-09-11T02:00:00+02:00

My new tailor made bag, by WeBag, just arrived and it’s awesome. The quality of the materials and fabrication is excellent; it truly is the kind of product that will last forever.

If you are in the market for a new leather bag you better check WeBag

RIP Bill Moggridge

2012-09-10T02:00:00+02:00

Sad but true Bill Moggridge passed away at the age of 69. Among the other things he was the designer of the first laptop. If it’s work it’s unknown to you please do yourself a favor and read Design Interaction.

Adobe's CSS Shaders rolled into CSS Filter Effects Specification as an official web standard.

2012-09-05T02:00:00+02:00

Great news for those among us who wish to bring more exciting effects on the web. Adobe’s CSS Shaders proposal have been approved approved by W3C as a part of the Filter Effects. For the ones new with the matter here is an introduction and a series of examples¹

A special prototype webkit browser by Adobe is required. You can download it here ↩

Fine tune your headers typography with SlabText.js

2012-09-03T02:00:00+02:00

Based on Erik Loyer’s slabtype algorithm SlabText is a nice jQuery plugin to achieve the popular slab header effect. I especially like to be able to manually set word combinations and the possibility to set a break point, to disable the effect, if the view port reach a chosen minimum resolution. Get the source on github

If you are interested in javascript and typography you should also check Paravel’s lettering.js to fine tune each single letter of a given text.

Avgrund Modal

2012-09-02T02:00:00+02:00

Nice jQuery plugin, based on the Avgrund concept by Hakim, to display a modal layers showing the depth between it and the page.

From Twitter and RSS to OmniFocus

2012-08-31T02:00:00+02:00

I’m a voracious user of Flipboard, and during my daily reading I often stumble upon news that I wish to do more with: softwares I wish to try, news to writing about, etc. To accomplish that i was using a series of IFTTT rules to send this content to my email; with the result of ending up with a quite polluted email inbox.

Today Federico Viticci published it’s, IFTTT and Hazel, workflow to save starred tweets to OmniFocus, leveraging IFTTT and Hazel. Inspired by that I’ve created two IFTTT recipes and two Hazel rules to achieve the same for both twitter and google reader.

The IFTTT recieps are the following:

one for twitter
one for google reader

Both are structured to create a text file inside a specified dropbox folder. The output is designed as a multiline text files. The first first of which is used as the OF entry title and the rest of the content is passed in as the note.

The first of the Hazel rules is conceived to run an appleScript to the content of the file—to encode the text in UTF-8, parse it and create the new entry in the OmniFocus inBox.—, set the label to green (to know which files have been processed) and confirm the entry via Notification Center (using the automator action provided by Automated Workflows).

The appleScript to parse the conent:

-- This script is meant to be executed from Hazel
-- It is used to create a new task inside omnifocus 
-- The first paragraph is used for the title, the others are passed in the notes
-- by Federico Weber | http://federicoweber.com

on hazelProcessFile(theFile)
    -- get the Title of the task
    set content to read theFile as «class utf8»
    set title to first paragraph of content

    -- Get the note of the Task
    set noteContent to get replaceText(title, "", content)

    tell application "OmniFocus"
        set theDoc to first document
        tell theDoc
            make new inbox task with properties {name:title, note:noteContent}
        end tell
    end tell

    return true
end hazelProcessFile

-- replaceText method by Buce Phillis 
-- http://foolsworkshop.com/applescript/2008/05/an-applescript-replace-text-method/
on replaceText(find, replace, subject)
    set prevTIDs to text item delimiters of AppleScript
    set text item delimiters of AppleScript to find
    set subject to text items of subject

    set text item delimiters of AppleScript to replace
    set subject to "" & subject
    set text item delimiters of AppleScript to prevTIDs

    return subject
end replaceText

The second rules is used to erase the file after one week if the file have been properly parsed. I could have used just one rule and delete the content after it have been parsed, but I prefer to keep the files longer to fallback if something goes bad.

If you found this useful please let me know via twitter or app.net.