The last project I was part of at superReal was the new dorothee-schumacher.com for which I helped build the responsive Frontend. The site is now online and you can have a look at it. I really like the end result and overall the whole project run very smooth.

Chris Coyier:

As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure… it all makes up a complete CSS style guide.

Chris Coyier shows some examples of CSS Style Guides from GitHub, Google, WordPress and more. It’s very interesting to see which rules they apply.
In the last few days or maybe weeks I often thought about writing down my CSS writing rules in a more detailed way. For me and also for someone else who might need to work with me on my CSS code. I’ll approach this very soon and post about it here. You might remember I’ve already begun it.

Marcel on the QUOTE.fm Blog:

We’re happy and kind of proud to announce that starting now, most of QUOTE.fm is responsive and with that easy usable on your smartphone. We even found a way to let you recommend stories from your smartphone

The last few days I began to make QUOTE.fm responsive. I started with the main features like the Following Timeline and Discover which are fully responsive now. You are even able to send recommendations right from your smartphone. We think that’s really a great step forward.

Please keep in mind that not every page is responsive yet and that retina graphics for all icons are coming in the near future.
Hope you enjoy reading QUOTE.fm on your mobile device of choice as much as we do.

Hey Jonathan, for all the readers who’ve never heard of you, how would you introduce yourself in two short sentences?

Hi, my name is Jonathan and I make stuff on the web. I’ve written a few books, speak at conferences, and put on workshops around the world.

Where did you grow up and what was your dream job as a child?

I grew up mostly in Ottawa, which I consider to be my hometown. Growing up, I don’t recall having any grand plans like being president or being an astronaut. I did picture myself on computers, though, and was lucky to have plenty of early exposure to them. It looks like my dream came true!

How did you end up on the web? Did you study Computer Science or something like that?

The web was a natural progression from where I was spending my time. I hung out on BBSs and eventually onto a local Freenet that provided access to IRC, gopher, and eventually the web. I even ran my own BBS for awhile and hacked up a copy of Telegard to do so. Computers were always a hobby and never even looked into a computer science degree. Everything I knew was self-taught through magazines, friends, or other online resources.

It seems that a lot of people working on the web are self-taught and don’t have a formal education in the field they are working in. What do you think, why is that? Is the traditional education system (for „web people“) broken?

I don’t think it’s necessarily that the education system is broken. Having spoken to a number of people who now do web development as a career, it’s interesting to note how many of them fell into it accidentally. It’s quite common for people to have been in school for something else or working on a career in an unrelated field and they wanted to build a web site. In building that web site, they discovered this whole new world.

The web industry had been too young of an industry to be considered when someone thought to themselves, „what do I want to be when I grow up?“ The web was a tool, not a career. Much like somebody might think to pick up a hammer to build a deck and then goes on to become a carpenter. The web is seen as a craft (and all the good and bad connotations that come with that).

The web is exceptional in that the tool itself can be used as the educational platform. We have a fantastic community that wishes to share and continues to do so via its very own medium.

That’s not to say that the traditional education system cannot accommodate the web. I’ve seen some schools that do it exceptionally well and schools can be a great place to build your network. They’re also a good place to be exposed to topics outside, but still possible related to, the field of study (such as writing, photography, history, math, etc).

Let’s talk about sharing your knowledge. You said you wrote some books and speak at conferences, you also have a blog. How much of your time are you teaching? I sometimes think that the problem of traditional education is that the teachers learned their stuff some years ago and since then are teaching what they know but aren’t learning new techniques.

I don’t specifically break up my day, week, or month into a percentage of how much I do versus how much I teach. Ultimately, I want to share what I learn and will take advantage of opportunities to do so. Sometimes that means doing a handful of workshops and conference talks in a month. Other times, I’ll go months without getting much of an opportunity to do so.

One of the problems with teaching web development is the focus on learning tools versus learning the medium. Many schools will teach you C# with Visual Studio or will teach you HTML with Dreamweaver, and it becomes about what buttons to press to get the desired result. This might be okay to get someone trained enough to be able to do production work within an agency but doesn’t prepare them for the onslaught of change that happens within our industry.

Here in Ottawa, for example, we have Algonquin College which does a great job of connecting with the business sector and polling for needed skill-sets. They also encourage those within the industry to participate in teaching at the college. Doing so creates a great lifecycle of producing students who are better prepared for the marketplace without going stale. As a business, if I need more people with a particular skill and I can get the school to train people in that particular skill, then I’m going to hire people who graduate from that school. We need more of this.

The more disconnected one becomes from the community they serve, the less effective they’ll be.

That’s sounds great.
You have coauthored two books, Accelerated DOM Scripting with Ajax, APIs, and Libraries and The Art and Science of CSS. I always wondered how writing a book together works. Can you tell me a little bit about the process and problems?

And, well, now a third: Scalable and Modular Architecture for CSS. Each was a unique experience. With the two books you mentioned, I worked with traditional publishers—Apress for the former and Sitepoint for the latter. They have deadlines and editors and page counts. It’s rather stressful and, in my case, didn’t pay exceptionally well. Many people I know who’ve written a book with a traditional publisher say that you don’t write a book to make money and my experience was very similar.

The thrill of writing a book comes in holding the physical manifestation in your hand. It comes from walking into a book store and seeing your name on the shelf. It’s been handy to be in an interview and when asked if I’m familiar with a topic, I can point to the fact that, „why, yes, I even wrote a book about it!“ It’s an empowering thing.

Writing a book isn’t easy, though. It requires a great deal of research and testing. The DOM Scripting book, for example, meant creating examples and testing those examples in every browser. It meant researching why the approach I was using was the best approach and it meant researching why things are the way they are. A great learning experience but also a time consuming one.

The most recent book, SMACSS, was self-published and therefore saved myself some of the pains of writing (deadlines and word counts) while introducing many others (publishing, distribution, and marketing).

Let’s imagine someone would pay you enough to live for three months, what would you do/work on?

That’s a tough question because I’ve had no lack of ideas of projects I want to work on. I just haven’t had the time to do them. Three months isn’t nearly enough time for all of the ideas I have. I’d sift through and find a project that I think I could complete and get to market within that time and it would be a project that I felt had enough possibility to make money.

It would likely be either a desktop application or a web application that served a particular niche. For example, I’ve been really interested in building a better development tool but one that is specifically tailored to the workflow that I lay out in SMACSS. We’ll see if I can find the spare time to do just that.

So you are also capable of programming for Mac OS X? You really are a jack of all trades, aren’t you?

Maybe not quite that jack! I haven’t jumped into Objective C yet. I’m still a fan of web technologies. If I were to attempt a desktop app, I’d likely try my hand at using Titanium or something similar that would let me blend web technologies with the desktop.

What’s your favorite thing to do when you’re not working?

When I’m not working? I’m not sure what you mean.

I kid! I do tend to fill up my spare time by working on personal projects—like SMACSS. Otherwise, it’s time spent with my two boys, or travelling, or just watching a movie.

So it seems you are kind of a workaholic, in a positive sense. Is that the secret of your success?

I’m not one to encourage people to be a workaholic. I do encourage people to enjoy what they do. And I do enjoy what I do. Success for me has a come from putting stuff out there, stuff that helps other people do a better job or an easier job at what they do. If I could do that in half the time, I’d likely be just as successful. Of course, success is relative. I’m not making millions and living in mansions. But I am getting to travel, which is something that I’ve really wanted and is something that makes me happy. That is what has defined success for me.

That sounds really nice.
What do you think of CSS Preprocessors? I use CodeKit with LESS or SCSS and am really excited.

CSS preprocessors have some great features. I specifically like Compass which is a great addition to SASS. CSS has definitely reached a stage where build tools can create a better experience for developers (through features like mixins, functions, and variables) and for users (through improved performance from file concatenation and minification).

Do you see dangers in using these technologies?

They’re not inherently dangerous, no. You can wreak havoc with CSS just as easily as you can with a preprocessor. With any tool, better results will come from understanding what the tool does.

Jep, that’s right. So let’s bring this to an end: What question would you like to answer, that I didn’t ask?

„How do you get such luscious hair?“ The secret is conditioner.

This was a nice chat. Thank you so much for reaching out. I hope I was able to offer up some insightful responses.

Thank you for your time Jonathan. It was a pleasure.

You can find Jonathan on Twitter, snook.ca and SMACSS.com.

I hope you remember my interview with Harry Roberts of csswizardry.com. At one point we talked about his presentation at the FrontTrends conference, which is now finally available for watching online. I encourage every Front End Developer to watch it and also read his blog.

Harry Roberts:

All of the talks were fantastic, very, very diverse, a mixture of technical and theoretical. They were all remarkable but my personal favourites were Rachel’s, Chris’, Mathias’ and Bartek’s.

Sounds like Front-Trends 2012 was a very, very good and fun conference. I really want to attend next year. Hopefully my english is a lot better till then.

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.

Vertikale Zentrierung in der Webentwicklung ist generell Teufelswerk. Mit der Zeit und ein paar Kniffen allerdings kann man auch diese Situationen meistern – Spaß macht es aber meistens trotzdem nicht und manchmal erfordert es extrem seltsames Markup.

Ein häufiges Problem ist das Zentrieren von Text in Submit Buttons von Formularen. Im Grunde funktioniert die Heransgehensweise einer festen Höhe mit einer Zeilenhöhe in gleicher Größe sehr gut – zumindest in webkit Browsern wie Chrome oder Safari. Im Firefox zum Beispiel führt das gerne mal zu nicht ganz perfekten Ergebnissen. Wir hatten da bei QUOTE.fm schon hitzige Diskussionen, die zum Glück beendet sind weil ich einen einfachen Weg gefunden habe.

Es ist offenbar so, dass Firefox noch irgendwas im Inneren des Buttons macht, trotz padding: 0;. Bei einem a-Tag passiert das nicht, nur beim Submitbutton.
Das Zauberwort zur Lösung heißt ::-moz-focus-inner und so funktioniert es:

<input class="add_comment" name="add_comment" type="submit" value="Comment" />

Dazu das passende CSS:

.add_comment {
    width: 80px;
    height: 28px;
    color: #fff;
    font-size: 13px;
    line-height: 28px;
    background: #0073a3;
    border: none;
}

.add_comment::-moz-focus-inner {
    border: 0;
}

Ich habe das ganze zur Demonstration und zum selbst herum testen bei jsfiddle noch mal nachgebaut.

Ihr kennt alle den schönen Effekt, wenn man in ein Eingabefeld klickt und der Text darin verschwindet. Bei einem Anmeldeformular zum Beispiel steht in einem Feld Username, man klickt rein und der Platzhalter verschwindet. Gibt man nichts ein und klickt wieder außerhalb des Feldes, dann steht der ursprüngliche Text wieder drin.

Dieser Effekte musste immer per JavaScript erzeugt werden. Dank HTML5 und dem placeholder-Attribut geht das mittlerweile für aktuelle Browser (Chrome, Safari ab Version 4, Firefox ab Version 7, Opera ab Version 11.5) auch einfacher.

Mal angenommen wir haben ein einfaches Input-Feld mit einem vor definierten Inhalt.

<input type="text" value="Vorname" />

Wenn man jetzt in das Feld klickt passiert nichts. Man muss Vorname selbst rauslöschen um den eigenen Namen eingeben zu können. Das ist natürlich ziemlich blöd. Um das einfach und schnell zu lösen benutzen wir einfach statt value, placeholder.

<input type="text" placeholder="Vorname">

Die komplette restliche Arbeit nimmt uns HTML5 ab. Klick ins Feld und wir können unseren Namen eintragen und Vorname verschwindet. Tragen wir nichts ein und klicken außerhalb des Feldes steht weiterhin Vorname drin. Alles ganz ohne JavaScript.

Wer möchte, dass das ganze auch im Internet Explorer funktioniert, für den gibt es das jQuery Plugin Placeholder. Einfach jQuery, das Plugin sowie eine eigene scripts.js für unseren Code einbinden…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.placeholder.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

… und dann noch das Plugin in der scripts.js aufrufen. Fertig.

$(document).ready(function(){
    $('input, textarea').placeholder();
});

Das ersetzt dann in alten Browsern bei allen Inputfelder und Textareas den placeholder. Man könnte das natürlich auch nur auf einzelne Felder anwenden, z.B:

$(document).ready(function(){
    $('#search').placeholder();
});

Viel Spaß damit. Ich nutze es andauernd und es macht die ätzende Arbeit mit Formularen ein Stück angenehmer.

Ihr erinnert euch vielleicht noch an die Ignite letztes Jahr. Dieses Jahr gibt es etwas besseres. tidenhub 2011.

Der Unterschied zwischen den Gezeiten Ebbe und Flut. Jeder, der schon mal sein eigenes Projekt hatte, wird diese Differenz kennen. Die emotionale Achterbahnfahrt zwischen dem erniedrigenden Tief und dem absoluten Hoch. Das pushende High, das Flügel verleiht, aber auch den schmerzenden Punkt, an dem man am liebsten Alles hinschmeißen möchte.

Und wir wollen es hören von euch! In 6 Minuten und 40 Sekunden. 20 mal 20 Sekunden. Auf 20 Folien sollst du uns und den anderen Zuhörern dein Ding vorstellen! Insgesamt wird es 10 Vorträge geben, die inspirieren, zum Nachdenken anregen oder uns zum lachen bringen.

Datum: 10. März 2011, 19:30 Uhr · Ort: Lerchenstraße 16a, 22767 Hamburg

Also egal ob ihr etwas vortragen oder einfach nur lustige und interessante Vorträge hören möchtet, meldet euch an und seid dabei!

Das Design hat übrigens Marcel gemacht und ich habe es umgesetzt (mit kurzer Hilfe von Mathias.). HTML5-Anfänge und viel CSS3-Kram. <3
In webkit-Browsern sieht alles übrigens am schönsten aus und es gibt kleine Animationen oder Ähnliches zu entdecken. Aber auch in allen anderen Browsern funktioniert alles bestens.

Das war unser erstes komplettes, kleines Projekt bei den Elbdudlern.