“Amazing web” roundup – November 9th

On this weeks web roundup we have infographics, iphone prototyping, some stats, re-breanded zen coding and a glyph font freebie! 

The NYT’s Visual Election Outcome Explorer and case study.

NYT has brought us an amazing pre-election interactive infographic,  showing all the ways US presidential candidates can win.
They used D3 library for SVG and some amazing animations. pro tip : option+click  to see slower animations and see how they we done. I was so sure it was flash at first I had to inspect and be sure…

Infographic | Case Study

Ratchet:

Prototype iPhone apps with simple HTML, CSS and JS components.

http://maker.github.com/ratchet/#gettingStarted

Firefox dips below 20 percent, Chrome falls, Internet Explorer gains | Ars :

(more…)

Amazing web collection – end of october edition

The web is full of amazing stuff, interesting articles, etc’
Every week I’ll be posting a weekly summary of what I’ve read through pocket (former Read-it-later) with my personal take on things. 
To kick this off, I’m calling this “End of October edition” 

CSS3 tucked corners effect – RedTeamDesign:

I love seeing this kind of innovative techniques! Very simple and ingenious. 

Learn how to create and use CSS3 tucked corners even when you’re using a pattern as background for the containing block in which the box live.

http://www.red-team-design.com/css3-tucked-corners

Flexplorer – a flex-box playground:

 

Flexplorer is a nice web based tool to play around with flex-box layouts, and test the various flex-box features.

http://bennettfeely.com/flexplorer/

The Return of the Scroll:

This article talks about the return of the antient scroll, as in the form factor of long pieces of text, 
with the introduction of the new scrolling reading mode in the iPad Mini’s iBooks.
This seems very natural to me as most of my reading is done through pocket, and it’s in the scrolling format.

The new iBooks scroll interface behaves much the same way as you would expect: slide your fingers up or down the screen to scroll in the desired direction. Is this mode better than the traditional pages approach and are we going to see other readers follow?

 http://www.usabilitypost.com/2012/10/29/the-return-of-the-scroll/

(more…)

three.js with css3d rendering

This just blows my mind! Now I have to learn three.js!
mr. Doob (Ricardo Cabello), the creator of the famous three.js webgl library has this to say :

Now, lately I’ve been working on the CSS3DRenderer for +three.js as a solution for the current iOS situation. So, I just got curious and decided to try to replicate the demo and see if it could be CSS3D. 

And this to show : 

This amazing demo has been rendered with css 3d, using the three.js library
This demo is working solid on ipads, iphones, nexuses, tabs and other devices that don’t do webgl! 
I think we’re about to see a flood of css 3d demos on the web when this rendering mode for three.js is released

Read more | See the demo 

Css only “click outside to dismiss” popouts

I was playing around with this idea for a while, toggelable , css-only, menus, which are dismissed when clicked outside.

What helped me to see the solution is the fact, that every html element can receive :focus if it has tabindex attribute applied to it.
So basically, all I need to do after focus is applied, is to show the hidden div.

The benefit of this solution over javascript, is that, JS can’t capture events outside the body, making it difficult to know when user has clicked somewhere else.

In order to toggle, there’s a hidden element inside the button, which has it’s own tabindex, and when receiving focus, removes focus from parent, thus hiding the whole thing.