QUOTE.fm Read WIP Demo

As a designer Marcel often shares screenshots of the designs he is currently working on. I thought about what I can share with you guys that’s more than a screenshot of the pages in a browser, because if I do my job really good it looks exactly like the designs you already saw.

Our process at QUOTE.fm

After Marcel finished his work in Photoshop I take over the PSD files and begin working on the frontend. This means I craft all the HTML and CSS with dummy content and every possible state of every element. I also do all the animation stuff in JS and things like that. When I finished my work, it’s Philipp’s turn. He takes my stuff and integrates it in QUOTE.fm. He makes sure that everything works the way it should. From time to time he discovers minor bugs or needs some elements I forgot to implement. Then it’s my turn again. Sometimes we have to go back even further and do some design changes. We repeat this process over and over again until we are completely happy with the result.

What I am currently working on

The last couple of days I worked – with short interruptions – on the new Read section. As you might know we are building a read later service into QUOTE.fm. But that’s not all. We are also upgrading the read section with some social components.
For example you will see who recommended the story you are currently reading, what they said about it, which paragraph they marked, etc. You will also be able to comment on the article and engage in discussions right from the clean text view.

It’s all far from completion and everything could be changed any second, but I want to share my process along the way. So go ahead and try the QUOTE.fm Read WIP Demo.

Clawing The iPhone Pt. I

Jorge Quinteros:

This is how I clench the iPhone in my hands when photographing on the streets. Despite a friend’s remark, I don’t think it’s unusual. I refer to it now as “clawing the iPhone” because that’s how my friend Victor described it when he pointed out the odd similarity to a bird gripping on to a twig or something. I use my thumb to press on the shutter button and it’s as easy as that.

I often hold my iPhone the same way when photographing in landscape mode. As Jorge I am sometimes scared to drop the phone, too.
But most of my photos I take with Instagram in portrait mode anyway.

Sausages

Hamburg, April 16th 2012, Fuji X100

Optional Tags in HTML

Jens O. Meiert:

For convenience and in order to allow for additional bits or bytes being saved in your markup, here’s a list of all optional tags according to the HTML 4.01 Strict DTD.

Last week or so I had a conversation on Twitter with Daniel whether you can resign html, head and body tags. Turns out that’s true and there are also some closing tags which are dispensable. Nevertheless I will continue to use all of them.

rwanda+uganda part III

Another pile of amazing photos by Severin Koller.

Clicky Keyboards

Shawn Blanc:

If you too want to adorn your desk with an ugly keyboard — one with a loud personality and which increases typing productivity — then I recommend the Das Keyboard. I prefer both the tactile feel and the sound of the blue Cherry MX switches, and though I find the Das to be the ugliest of the bunch, a serious typist knows you shouldn’t be looking at your keyboard while you’re typing.

Ever thought about switching away from your slim, silent Apple keyboard to a clicky keyboard? You should probably read and hear this very detailed review by Shawn Blanc.

I’m really happy with my small Apple blueetooth keyboard and wouldn’t want to give it away. But I can see now why you might decide differently.

Harry Roberts HTML/CSS coding style

Harry Roberts:

When I write HTML and CSS I have a certain set of rules and guidelines I stick to with regards syntax and formatting. I‘ve decided to write them up here not to preach or tell you how to do things, but simply to share how I like to work.

Harry Roberts wrote about his HTML/CSS coding style. I think I’ll adopt some ideas and will write about my own coding style in the near future.
I wanted to do this for a long time and never got around to it. Harry’s article might be the kick in the ass I needed.

Animate.css – a bunch of plug-and-play CSS animations

Dan Eden:

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Dan Eden put together a stylesheet with some fancy CSS animations which are really easy to use. Simply add the classes animated and the animation name to an element and you are good to go.
I wouldn’t include the whole file just for one animation, but it is a good library for picking the animations you like and including them in your own stylesheet or vars.less.

Street Photography. Easier said than done.

Daniel Milnor:

Street photography is a nightmare, at least for me. So much has to happen before something magical occurs. This can happen instantly or over a long period of time. Light is always an issue. People are an issue. Access is an issue. There is a razors edge fine line between a good street image and a snapshot being pawned off as a great work. Whats the difference? I don’t know. I’m no expert. I guess I know it when I see it.

Great article by Daniel Milnor. A must-read.

‚Red China‘ in Color, 1958

Never seen a color photograph by Henri Cartier-Bresson? Here you go.