Speaking Engagements, the .net-Awards and Freelancing

Here is a quick overview of my current status and why there are little updates in the blog. Also some great news.

Talking at Conferences

As you know, if you follow along my stuff, I spoke about coding guidelines at TalkOff Conference in Lille, France in January this year. The conference was organized very well and I had a lot of fun. Besides that I met a lot of great people. Thanks again for the invitation. You can find the slides here.

I am also very happy to be invited to UX Munich where I will speak about style guides in general and how you can be friends with designers. Check out the talk’s description on their website. There are a lot great people speaking at the conference as for example Vitaly Friedmann from Smashing Magazine and Nishant Kothary who was part of the team that redesigned Microsoft.com. Also Bastian Allgeier will be speaking, who wrote an article for The Nitty Gritty just recently.
This conference will take place in Munich, Germany and will be helt next week. So check it out quickly and get a ticket!

Later in April I will present at Front-Trends 2013 in Warsaw in Poland and yet again some top speakers of our industry will present there, too. Check out the speakers page to find Lea Verou, Faruk Ateş, Jake Archibald and a lot of others.

If you want me to speak at your conference, I’d be happy to submit a proposal. Just contact me.

.net-Awards Nomination

I am very happy to be one of the nominees of this year’s .net-Awards in the category “Young Developer of the Year”. Check out the website and vote what you like.
Thanks to everyone who proposed me to be nominated, this really means a lot to me. <3

Freelance Work

A couple of months ago I decided to leave /gebrüderheitz and do freelance work exclusively for some time starting in April. I want to focus a bit more on Open Source projects and work on some side-projects. I am really excited about the projects that I’ll be working on and about the re-organisation of my life.
The pipeline of actual client projects is still kind of free, so drop me a mail to info@drublic.de or use the contact form if you are interested in working with me. Please see the “Hire me” section on my website to get a quick overview of what I like to work on.

This all and some projects besides my normal work schedule keep me from updating my blog more often. I hope to write some more technical articles soon.
LOVE!

TakeOff Conference: Talking About Good Code

Yesterday (17. January 2013) I was talking at TakeOff Conference in Lille, France. I actually extended my talk from the Fronteer’s Jam Session “Writing Awesome Code” with lots of new stuff. So check out the slides. There will be a video with the actual talk that is not online yet. I will post it here when it is.

See slides

Just a few words concerning the conference: The organizers are doing a great job here and the speakers are really good. If you’re not here, you are missing out on something :)

Working Draft Revision 100

Working DraftIt’s been over two years now – with our podcast Working Draft we have done 100 revisions. Congratulations to ourselves!

We recorded revision 100 on Monday and had a very special guest: Paul Irish. That’s why we recorded in English this time. The final podcast is now live and can be downloaded. Check it out and let us know what you think.

Listen to WD Revision 100

Here are the topics we talked about:

New Resource for Web Devs: The Nitty Gritty

Yesterday Kahlil Lechelt and I launched The Nitty Gritty, a new blog and resource for web developers about the cutting edge in HTML, CSS, JavaScript and web technology in general.

Visit The Nitty Gritty

About the idea of The Nitty Gritty Kahlil writes:

For a few years now, I’ve been watching my friends in the web development community write highly informative and well researched articles on their personal blogs, or as contributing authors writing articles for the blogs of their friends and colleagues.

We met at Smashing Conference back in September this year and talked about the idea of The Nitty Gritty. After some months of development we are now ready to present this idea to you.

So, cutting a long story short, we decided to execute on the desire to create a central hub for developers, hence The Nitty Gritty (TNG) was born and now we are about to wake this beast up.

I am very excited about our new project and hope so are you. I really hope that we can deliver high quality content within the next months. And hey… we already have some great articles coming up in the next few weeks

[…] including the performance pope Schepp, Yeoman core contributor Sindre Sorhus, and the maker of Kirby, Bastian Allgeier.

I have written a post myself about decoupling CSS by using placeholders in Sass which will be published today.

We would be pleased if you let us know what you think about this idea on Twitter. And make sure you follow @_thenittygritty! :)

Dabblet Chrome App

Dabblet Chrome App

I think all of you know Lea Verou’s dabblet.

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.
About dabblet

Some time ago I made this tiny Google Chrome App for jsFiddle which is in case just a bookmarklet with a bigger icon.

I did this for dabblet, too but extended the app to something more: It displays all your dabblets with title and creation-date. You can then visit your dabblet directly.

You can find the app in the Google Chrome App store now.

Download

This project is on GitHub, so please feel free to contribute and report bugs and feature requests.

Changelog

These are the major changes. All commits can be found on GitHub.

v1.0.0 – Aug. 19, 2012

  • Add button for viewing gist
  • Remove hogan.js in favor of an own replacer
  • Show “view dabblet” link in GitHub newsfeed

v0.7 – Feb. 13, 2012

  • Add search – #2
  • Rewrite code-basis based on JS AMD with RequireJS
  • Display message if user has no gists to display – #3

v0.45 – Feb. 02, 2012

Wo sind meine abgerundeten Ecken?

Sorry for this german post. For more information on this topic please check out the post “Where Are My Rounded Corners?”. Thanks to Daniel and Steffen at /gebrüderheitz.

Manchmal sind unsere Kunden verwirrt, wenn sie sich ihre neue Website im Browser anschauen und sie anders aussieht, als das Design, dass sie freigegeben hatten. In diesem Merkblatt erklären wir, warum es viele Vorteile gibt, diese Unterschiede zu akzeptieren und dass diese Vorteile die Nachteile überwiegen.

Lange Zeit haben wir die Gestaltung von Websites so gehandhabt, als ob es Printmedien seien. Hier findet nun ein Umdenken statt, denn das Internet unterscheidet sich sehr stark von den Printmedien.

Webentwickler haben lange versucht, den spezifischen Charakteristiken einzelner Browser entgegen zu wirken, indem sie Browser “zwangen”, die Website möglichst gleich dazustellen. Zum Beispiel ist es möglich, auch im Internet Explorer 7 oder 8 abgerundete Ecken darzustellen, damit sind jedoch andere Nachteile verbunden.

Es hat viele Vorteile, wenn man akzeptiert, dass das Internet sich anders als Printmedien verhält. Unserer Meinung nach sind das folgende:

#1 Mehr Zeit für das Wesentliche.

Feinheiten im Design wie abgerundete Ecken, Verläufe und Schlagschatten in älteren Browsern wie dem Internet Explorer 7 oder 8 umzusetzen, ist zeitaufwändig und teuer.
Bei Projekten mit limitiertem Budget und knapper Zeit ist es oft besser, die Zeit in wichtigere Bereichen zu investieren, wie zum Beispiel in das Verständnis von Geschäftszielen oder in Benutzertests. Zeit mit kleinen ästhetischen Details auf Kosten der wichtigeren Ziele zu vergeuden, kann den Erfolg der Website negativ beeinflussen.

#2 Steigende Userzahlen.

Zu viel Zeit in die Optimierung der Darstellung auf älteren Browsern wie Internet Explorer 7 oder 8 zu investieren ist kontraproduktiv, da diese Browser von leistungsfähigeren Versionen (wie beispielsweise Internet Explorer 9) ersetzt werden, die dann auch diese visuellen Verbesserungen unterstützen. Warum also Geld in einen schwindenden Markt investieren, wenn Sie ein zukunftssicheres Design für die nächste Generation von Browsern erstellen können?

#3 Bessere Leistungsfähigkeit der Website.

Eine Website in allen Browsern bis ins Detail gleich darzustellen, bedeutet, dass sehr viel mehr Bilder und auch Programmcode in die Website einzubinden sind. Dadurch wird die Ladezeit der Seite erhöht.
In einer Welt mit ungeduldigen Nutzern ist es wichtig, dass die Ladezeit möglichst kurz ist.

#4 Bessere Platzierung in Suchmaschinen.

Google weiß, dass Nutzer schnelle Webseiten bevorzugen. Deshalb beziehen sie die Größe einer Website in den Suchalgorithmus mit ein. Wenn die Ladezeit der Website kurz ist, wird sie im Lauf der Zeit bei Suchmaschinen besser gelistet. Aufgeblasener Code zur Anpassung älterer Browserversionen verhindert dies.

#5 Eine zukunftssichere Website.

Eine Website nicht in erster Linie für ältere Browser zu gestalten, stellt auch die Zukunftsfähigkeit der Website sicher. Wir Webdesigner wissen in welche Richtung sich die Browserunterstützung entwickelt und wollen unseren Kunden daher eine Website gestalten, die der Zukunft Stand hält. Programmcode für alte Browser, wie dem Internet Explorer 7 und 8 birgt das Risiko, dass Ihre Seite in neuen Browserversionen nicht funktionieren könnte.

#6 Einfachere Instandhaltung & Aktualisierung

Ein sauberer und schlanker Programmcode vereinfacht Anpassungen der Website. Programmcode, der für ältere Browser erstellt wurde, kann hierbei allerdings Kopfzerbrechen bereiten. Stellen Sie sich vor, Sie möchten die Farbpalette Ihrer Website ändern. Wenn Ihre Website abgerundete Ecken für den Internet Explorer 7 oder 8 unterstützt, bedeutet dies, dass viele Grafiken farblich angepasst werden müssen. Das ist zeitaufwendig und teuer.
Wurde Ihre Seite allerdings mit dem Fokus auf aktuellen Technologien gelegt, ist dies ein Aufwand von wenigen Minuten.

#7 Mehr Gestaltungsmöglichkeiten.

Zu guter Letzt sind manche Designansätze gar nicht in älteren Browsern umsetzbar. Internet Explorer 7 und 8 können manche Designs nicht darstellen, die in fortschrittlicheren Browsern sehr gut aussehen werden.

#8 Wird die Zielgruppe damit umgehen können?

Auf jeden Fall! Zunächst einmal nutzen viele User fortschrittlichere Browser wie
Internet Explorer 9 oder Google Chrome. Wie auch immer: Viel wichtiger ist, dass die Website auch in Internet Explorer 7 und 8 einigermaßen gut aussieht. Die Chancen sind gut, dass die Besucher der Website gar nicht bemerken, dass einige Feinheiten im Design fehlen, weil sie die Website niemals in einem anderen Browser öffnen werden. Wahrscheinlicher ist, dass Kritik von Kollegen geäußert wird, die das Design überprüfen. Dabei ist wichtig zu bedenken, dass die Kollegen wahrscheinlich nicht Ihrer Zielgruppe angehören.

Wir glauben, dass die Vorteile überwiegen, wenn kleine ästhetische Unterschiede für einen kleinen Kreis von Benutzern zugelassen werden. Wir denken heute schon an die Zukunft. Tuen Sie dies auch.

Disclaimer

Dies ist eine Übersetzung des Hefts “Where Are My Rounded Corners” von Paul Boag.
Gefunden bei Paul Irish

Credits: Paul Boag for Headscape

Download

Feel free to use this text and share it with your customers and other web-developers that suffer under the same issues.
English Version    German Version

HTML5 Boilerplate Favicon PSD-Template

No longer maintained

Version 3.1 – Update 25.11.2012

Add current 16x16px favicon.

Version 3.0 – Update 25.05.2012

And again Daniel updated the template with some great things.
It now features the “new” HTML5 Boilerplate icons, you get a better overview of what icons are present and how the output of images is.
Apart from that Daniel made a bug-fix for the 144×144px touch icon where the PNG wasn’t saved by default.


Version 2.0 – Update 21.03.2012

Daniel has updated the favicon template with a 144×144px touch icon. This icon is needed for the high-resolution iPad Retina displays which are built into the latest version of the iPad. A version of this is also included in HTML5 Boilerplate by default. Please read this issue for more information and remember Mathias’ article, which he updated recently.

Thanks goes out to Daniel.


I’m using HTML5 Boilerplate (H5BP) for nearly all of my projects at the moment. Why? Mh, I think mostly because it provides best practice for so many things concerning front-end development. With H5BP I learned how to use favicons (or touch icons) in different variations for smartphones and stuff properly.

Friend and boss Daniel designed a nice PSD template to create the various icons you need. It has four different sizes and includes slices and meta-information for everything. You just need to include your favicon, “Save for Web” and you’re done.

He gives it away for free. So feel free to download and share. It would be pretty nice if you check out his Twitter-stream and follow him.

Preview   Download PSD

Additions

Please be aware that you also should add an apple-touch-icon.png. You could do this by copying apple-touch-icon-57x57-precomposed.png and rename this. Thanks Sven for the heads up.

A Note on .ico

Since you should always use a .ico file for the favicon in order to get it working in Internet Explorer I would advice you to open favicon.png in Photoshop and use the ICOFormat plugin to generate the .ico file.

Multi-Layer Favicons

Jon R. Humphrey made a layered favicon template and shared it on GitHub. Please check it out, it might be more helpful than this template from time to time.

This is what it’s all about!

Sometimes I need some space to share my thoughts. Sometimes this means its just a very short post and sometimes it will be a little bit more. Some kind of tutorial or what ever.

Actually I’m a front-end developer located in Freiburg, Germany. Maybe you’ve head of this city: Smashing Magazine is based here, too.
I’m currently working as a freelancer at /gebrüderheitz with people like Daniel and Steffen. I’m also engaged in some projects: I do some fancy stuff with Christian (we do Pagetimer), with Daniel I’m developing WordPress-Themes for Themeforest under the name Flipthemes (you should checkout this theme) and there is this kinda new project Smart-Students with some other guys. Go check it out if you want to.

So, most of the time I’m developing HTML, CSS and JavaScript. I really like all the HTML5 and CSS3 goodness and try to code “cutting edge”. Sometimes this is not possible in regard to the customers need. But anyway…
My favorite JS library is (as I think you can guess) jQuery and I try to stay up to date with all the new stuff they’re bringing in with every minor release. You should definitely read their blog to get to know the latest news.
Furthermore I really do a lot of stuff with WordPress and TYPO3.

There are some other things I’m doing. Check out my Github-Account.

If you have any questions, feel free to write something.