Play on hover webm

If  for some reason do you want to make a website full of tasty, perfectly compressed WEBM thumbnails (and you should), you need to make them play on mouse over.

I used this on Bootstrap on fruitjuice.io. Check it out!

 

 

Pixelapse review

Rumors across the village where saying an Ex-Googler (such a juicy cliche) builds a github for designers. So I hopped into my 76 Camaro and took a ride to check it up!

Well open source is definitely good, Tesla recently took the leap and opened their electric car patents and Google is having a similar policy on their android. Going open source is another way of saying: Ok, let’s go f**king forward! Github was one of the best things ever, it taught me to learn programming by doing it, not by blaming myself I didn’t studied enough. Stackoverflow gaved me the right answer in the exact timing to finish my projects.

Design on the other side has kinda different background rather than coding, it is linked to art, a domain that has a big secrets. Golden rules, secret painting tricks, posh schools and masters teaching you great techniques. When design met up digital it could not use this anti-progress system, so ready-to-use tools like webfonts, icon pack, wireframing softwares emerged.

Dribbble made by Rich Thornett made a first step, creating a portfolio platform where people where encouraged to ‘rebound’ other people work, collaborate and do awesome stuff together. Lets say Andrew made a cool illustration, the next John takes it into After Effects and make an awesome animation. This is what dribbble was all about, but sharing your source files by default in your own small cloud is another level.

Besides the ‘make the world a better place’ idea it’s one hell of a deal. You get infinite version control, so you don’t need to worry about dropbox anymore, as long as you keep your files open source. The desktop app is clean and straight forward and on the web account it can parse and create jpg’s from your files. I am wondering, maybe soon some wireframing features like Invision’s app would be possible.

What do you think about Pixelapse? Would you open source your past projects for the good of mankind?

 

Reporting from my Camaro,

Your’s trully,

Felix

Making music in JavaScript OMG

There are few things that really got my attention lately but this is one of it. To cut it short, this is WavePot, a web app designed to ‘code’ music. As it’s far for becoming a real DAW it has some potential, they decided to crowdfund the development and divide it in milestones.

Screenshot 2014-10-24 10.39.46

Give it a try, you’ll find it very familiar to Sublime or Brackets, just double click on the projects and hit play. I am eager to see how would work connected to a midi device via websockets.

For more  info about web audio I  found Jan Monschke talk really interesting via JSconf.

Link: WavePot

Smart traffic light

From the series of ‘What are my colleagues doing’ I present you the Smart traffic light installation. A while ago at Minivegas we had a brainstorm meeting about how we can make the waiting on the traffic light more fun and safe.

The idea was to make people dance, track their movement using kinect and make the red man dance, literally. The rest does not need any comments, just enjoy the featured video below.

Congrats to the team for such a nice project!

Wiki House in webGL

Today I’ve exported the v3 open source file and converted into a OBJ to import in Clara.io.

It’s nice to get the idea of how it looks without installing sketchup in your computer.

Please be patient, it will take a bit to load.

WIKIHOUSE

Clara.io review

Clara.io is a company that made an online 3D editor, it’s part of web app movement, or this is how I like to call them. Where a software that you usually had to check OS functionality, check your diskspace and hopefully later to run an installer, now you can access anywhere on every device with a single click.

As I’m familiar to C4D and Blender, I said I should give it a try. Took this scenario, this is a beta, not a fully replacement of a complex 3D software yet so I thought of using it for small edits. For example to cut the body of this bike, and then modify the frame adding an enlarged torus. Worked perfectly!

Screenshot 2014-07-29 15.31.12

Screenshot 2014-07-29 15.54.13

And the embed webGL result:

 

Then I thought of something much harder, something I would usually do in a 3D software. I asked Alex Beltechi to send me a scene created in Cinema 4D to edit in clara.io. The import was really simple, just dragged the OBJ file in the browser. It was a big file, around 700 smaller objects, I’ve done some basic object merging, simplify meshes, worked a bit hard on Chrome (the 32 bit version) but faster on my 64 bit Safari, never tested on the 64 bit Canary.

Screenshot 2014-07-29 13.00.16

Screenshot 2014-07-29 15.21.42

It has all the basic editing tools for slicing, subtracting, blend, mirroring, etc. And an animation console, just take a look at their take on the Pixar intro and you’ll understand what powerful this software can be. Just press play below!

One other great feature is the three JS (scene) exporter. As webGL support grows over devices this could be a great tool to create 3D graphics ready for every modern browser. Personally I tested exporting the 3D bike scene and imported via ThreeJS and worked, all though still support is a bit scarce and I like the Blender method better.

 

Ah! I forgot to tell you that the mother company is Exocortex, that has a collection of motion graphic software for cinema. So they have a Vray render option on all your creation, the neat thing its all on the cloud and streams in your browser.

After all this,  it’s a sharing platform, like github is for code, clara.io is for 3D models. Of course you could choose for a pro account and have all you projects private, but you miss all the fun of being forked and get your creation remixed. Check their impressive library here.

Conclusion: Even with the ups and down this is a beta of a pioneering product. Nevertheless, even in this stage I will use it without a doubt to edit and create content. The power of  web applications is enormous, combined with a good cloud service defines the way of how future software will work.

Why it’s a need for bigger screens

Apple made the step going for bigger screens on their new iphone 6 range. A thing bullied by the Android fanboys hard, as the android premium phones where usually this size for a long time ago.
I could not stop remembering when the first iphone got out it was a crossbreed between a phone and their ipod. In that time you had some querky range of small devices, it was consider big phone. You would mainly use it to text messages, use some apps like twitter, facebook and yeah, to do calls.

When I had my iphone 4 I remembered I used to laugh at Samsung’s with a bigger screen. Not to mention the Phablet:) At that point I thought that my 3,5″ was perfect. Most of the time I used it to chat, facebook, instagram and it was ok for that. But now things change and mostly because of the web (again!)

Content is the key for this. People want bigger screens because they want to see videos, read books and do things that you would do on a laptop. And let me explain a bit. We look over the main content providers like Youtube for example, statistically most of their videos are seen in the default view, that’s nearly a phablet size. On facebook they appear smaller, perfect for a 4,5 – 5 inch display.
Reading books on a iphone 4 is impossible, no matter how abtitious you are. Kindle’s 6 to 10 screen it is the standard for reading. It’s most certain mobiles want to get near that range to pull up the online book market.

Web development changed so much (for the best) in the last years. Different device size lead to responsive design and made design a thinking role rather than trowing some pixels in photoshop. But a mobile website it’s always a nasty task, you need to prioritise your function and focus on content. A bigger screen will be a breath of fresh air with that extra 1 inch, haha.

SVG animation countdown

SVG’s files are here for longer than you think, the full name is Scalable Vector Graphics and they are based in XML. This means that you can open one with your code editor and you can see every piece of the puzzle. Over the last years due to the need for responsive design that will fit any device they became more and more mainstream. Like hipster haircuts:)

Once you can easily parse them, it did not took so long and ppl made animations in different combinations. All tough most of the graphics are do-able in CSS,  the morphing possibility caught my attention so much I spend all night fiddling with it.

The result is a countdown with numbers from 9 to 1 that actually morph from shape to shape. In flash a similar effect could be made with the morph tween, but working with SVG is a little different.

 

See the Pen SVG Countdown by Felix Hornoiu (@felixhornoiu) on CodePen.

One first rule is the morph can be made only between certain amount of points, I choose 22 thinking its enough to get a decent detail level. In case of a less complicated number, like ‘1’ for example, I can stack points together or in line. Screenshot 2014-09-16 13.02.36 As you cannot draw holes, because that means another path clipping the current one I overlapped the shape in case of the ‘6’, ‘8’ and ‘9’. Screenshot 2014-09-16 13.13.12 As in every vector file it has a start and an end. This is a key factor of how the animation will behave and the best way to solve this is to have the actual vectors right from the start. In my case it worked by deleting the closest line to the top-left, as it’s based on XML the points act like in a word doc. Screenshot 2014-09-16 13.25.39 Timing its one of the hardest part as keytimes= uses a timeline between 0 and 1. Each successive time value must be greater than or equal to the preceding time value. I could not use fancy calculations like is JS so I had to came up with precalculated numbers. I made up this formula to slow the animation when its not morphing:

1 / n = a  // n = the number of shapes your morphing keyTimes=”0; 1*a – a/3; 2*a; 3*a – a/3; … 15*a- a/3; 2*a; 1;” keyTimes=”0; 1*0.0588 – 0.02; 2*0.0588  ; 3*0.0588 – 0.02; 4*0.0588  ; 5*0.0588 – 0.02; 6*0.0588  ; 7*0.0588 – 0.02;8*0.0588  ; 9*0.0588 – 0.02; 10*0.0588  ; 11*0.0588 – 0.02; 12*0.0588  ; 13*0.0588 – 0.02;  14*0.0588  ; 15*0.0588 – 0.02; 16*0.0588 ; 1″

Then used the mighty Wolfram Alpha computation engine to get actual numbers:

keyTimes=”0; 0.0388; 0.1176; 0.1564; 0.2352; 0.274; 0.3528; 0.3916; 0.4704; 0.5092; 0.588; 0.6268; 0.7056; 0.7444; 0.8232; 0.862; 0.9408; 1″

To easily export SVG from illustrator you can Save As > SVG and click “View SVG Code”. As you already have the container, you need only the polygon points, as selected below. Screenshot 2014-09-16 13.31.56 So you end with a nice morph at the end that still has rough edges and pointy bits. To solve this I used an old mograph trick to smooth shapes that now can be done via CSS filters, you blur out the shape a bit and then pitch up the contrast.
 

See the Pen SVG Countdown by Felix Hornoiu (@felixhornoiu) on CodePen.


 
What other things can be done via this trick? A hamburger menu morphing into a close button? some fancy lettering?

 

How to target a parent div

For some reasons you may need this feature, you have a data-id for a div that is a child of others. I had this problem at my cargo site, so I had to come up with an idea.

If you are reading this article at the end of 2014 the new CSS4 may have your solution, but until then I made a sure solution via jquery:

 

 

See the Pen taCxv by Felix Hornoiu (@felixhornoiu) on CodePen.