Throughout my career, I held different roles at companies and saw how developers progress in their careers. I want to share my observation of how developers got into the positions that they progressed in. 
When you start as a Junior Engineer, there are certainly lots of things to learn what it takes to do the job. There are many open ends, so it is easy to grab one and start growing. As a Senior Developer, you will find yourself in the position to educate juniors and professionals. While functional experience comes with time, it is necessary to look at multiple other factors in order to advance in your career.

A list of factors that you should consider when you want to move forward with your software engineering career. Here I describe active and passive factors for developers to progress.

What You Can Do to Advance Your Software Engineering Career

With our german-speaking podcast Working Draft we introduced a new community to gather our listeners and interested engineers and designers to discuss related topics.

With our german-speaking podcast Working Draft we introduced a new community to gather our listeners and interested engineers and designers to discuss related topics.

Community Draft - German Speaking Engineering and Design Community

Speaking with software engineers in my team and through my mentoring with <a href="/blog/mentoring-club">The Mentoring Club</a> one question keeps coming up: &ldquo;What is the next step in my career?&rdquo; For everyone that is working in the industry and eager to grow personally, this question is a constant companion. I want to give you my perspective on how you can advance in your career after you've made the step to a senior engineer. I want to talk about how it's possible to grow further.

Speaking with software engineers one question keeps coming up: "What is the next step in my career?" I want to give you my perspective on how you can advance in your career.

Career Path - Advancing in Engineering Roles

I am honored to announce that I am a part of The Mentoring Club as a mentor.

I am honored to announce that I am a part of The Mentoring Club as a mentor.

Member of The Mentoring Club

The FYEO database held around 1.6 million podcasts on its peak. Each one of those podcasts does have quite a number of episodes which contain the real contents users are intested in: the audio track. And this is the stuff that every podcast platform wants to display to their customers. As soon as it comes out, is published. And as soon as people are searching for it. Let me take you on the journey of building the system that helped us make sure we have all the data in place to show the latest episodes to our customers.

The FYEO database held around 1.6 million podcasts on its peak. Each one of those podcasts holds episodes which contain audio tracks. Here is how we kept them up to date.

How to Keep 1.6 Million Podcasts Up to Date

In the last years my career took a turn into the direcation of technical management. While I listen to a lot of podcasts on a daily basis I started to collect a list of podcasts that help me stear through my work. Here is a list of podcasts for engineering managers, tech leaders and software architects.

In the last years my career took a turn into the direcation of technical management. Here is a list of podcasts for engineering managers and tech leaders.

Podcast Recommendations for Tech Leads, Engineering Managers & Software Architects

6 Podcasts for Tech Leads, Engineering Managers & Software Architects

Today we are sad to announce the end of Warhol. We did not see the growth that we hoped for in the past few months and actually getting Warhol's core idea to work proved way harder than we anticipated. We did not see a way forward within our budget of time, money and energy and thus decided to pull the plug. All that development has ceased, backend services are offline, contracts have been canceled. We will endeavor to keep this web page online for as long as possible and probably open-source bits and pieces of Warhol's core functionality.

Today we are sad to announce the end of Warhol. We did not see the growth that we hoped for in the past few months and actually getting Warhol&#x27;s core idea to work proved way harder than we anticipated

Sunsetting Warhol

Yesterday I decided to take a look at <a href="https://deno.land/">Deno</a> and how to get startet with it. Deno v1 <a href="https://deno.land/v1">was released roughly a week ago</a> so I though I give it a try and have a look in how far I can make use of it in the near future. Here is how I port an existing Express application to Deno.

Here is how I port an existing Express application to Deno.

Starting with Deno - porting an existing Express application

Warhol turns pattern libraries into test suites. It helps you to enforce a unified look and feel for your web project, no matter how large and complicated the project may be. Warhol learns from the examples in a pattern library and supports you in implementing a truly consistent user experience.

Introducing Warhol

In this post I want to show a way to use Higher-Order Components with React Hooks in order to structure complex components. This method can be described as an architectural pattern to give hooks a straight forward way to use them in order to prevent developers from falling for the traps hooks do have.

A way to use Higher-Order Components with React Hooks to structure complex components. This can be described as an architectural pattern to give hooks a way to make them usable.

Structuring Complex Components with Conceptual Components

This article covers the way me and the team I am working with migrate a React application from JavaScript to TypeScript over the last couple of months and onwards. The goal is to help developers with the same idea to get a hold on where to start. Here is how to find the right starting point.

This article covers the way me and the team I am working with migrated a React application from JavaScript to TypeScript over the last couple of months. The goal is to help developers with the same idea to get a hold on where to start.

Migrating from JavaScript to TypeScript in a Real World React Project

The state of how developers write code changes with the experience they gain. I tried to describe the phases that I have experienced within the last couple of years and tried to generalize them.

The state of how developers write code changes with the experience they gain.

The change of a developer’s advance

When I was working in a small agency, years ago, in Germany's warmest city, Freiburg, my boss introduced the team to agile working methods that he had read a book about. We had a whiteboard with some columns on them named To Do, Doing, Done. Some stickies were on these columns. We had a fast-lane which was filled with tasks all the time. I felt I was doing quite some work when fulfilling the tasks and moving a pile of them from one column to the next. Anyway, projects didn't finish on time. The feeling of being productive vanished as soon as we felt we were delivering late. Was there a problem in productivity?

How do be more productive? Communication is the key. Here is why.

I got the keys: Communication

With Heroku you can easily setup deployment and hosting of your application in the cloud. Here are 6 steps how to quickly set up your Node.js application on Heroku.

Here are 6 simple steps how to quickly set up your Node.js application on Heroku.

How to set up a Node.js app on Heroku in 6 steps

I've written a transmitter which collects data from <a href="https://www.contentful.com/">Contentful</a> and indexes it in <a href="https://www.algolia.com/">Algolia</a>. It is written in Node.js and really simple. The application syncs content between Contentful and Algolia. You can configure the service to run with Drafts (Preview API) from Contentful and put it in different indexes in Algolia.

A Node.js transmitter which collects data from Contentful and indexes it in Algolia.

⚡ Transmit content from any Contentful type to Algolia indexes

In the past I have written about how I use npm scripts for my build tooling. With this article I want to write about some problems I had and how I solved them. The problems I want to talk about further: <ul><li>Concurrency</li><li>Extensive build configuration</li><li>Build environments</li></ul>

How to solve three common problems with npm scripts: Concurrency, extensive build configuration, build environments

Solving npm scripts problems in JavaScript projects

When ever I do a front-end review for webpages I start compiling a new checklist of things that I need to take into account for the review. Now I tried to collect some of the most important questions to check for and release them publically.

Doing front-end reviews for webpages you need to make sure everything runs smoothly. I've compiled a checklist and release it publically.

Front-end checklist for website reviews

A Checklist for Website Reviews

We tend to solve a lot of problems related to the front-end by delegating them to existing programs. We use libraries and tools which we don’t understand completely - our code base grows and grows. But lately this trend seems to change and we slowly re-consider what we can do best: develop front-end code. What can we expect from this new trend and how can we use them in out daily business today?

Front-End tooling is getting compicated. It should be simpler. Pleeease and other tools can help. A statement.

Simplicity in Front-End Tooling

When writing JavaScript applications or websites a lot of developers write unit tests to ensure the code does what it is supposed to do. The hottest code uses ES6 and transpiles to ES5 with Babel. Mocha is pretty popular as a testing framework these days. Bringing these tools together can be cumbersome. Here is how you do it.

Testing ES6 Modules with Mocha using Babel with Browserify

npm is a Node.js’ dependency management system. It provides a <code>script</code> object in a project’s <code>package.json</code> configuration which can hold several CLI scripts. It is possible to run those via your command line. This way it is possible to replace your current build system. This article covers more about how you replace different tasks of a typical front-end build workflow.

How to use npm as a task-based build system for front-end projects by using different CLIs and npm’s scripts for JavaScript and CSS.

npm as a task-based build system for front-end projects

Using npm as a build system for your next project

Different projects I have worked on used Sass as the pre-compiler of their choice. This post shares some learnings we had while using Sass. There are a couple of great articles on how to use Sass in large scale projects — this one is more of a retrospective. I hope it helps you solving problems if you ever run into them. I wrote about some of my recent projects and the learnings I had.

Learnings from using Sass in large scale projects

INIT is based upon HTML5 Boilerplate and adds more structure for SCSS files, JavaScripts, includes build tasks and a whole lot more. Today we released INIT, a front-end framework based on Grunt, Bower, Karma and a lot more tools as version 1.0. This marks a special day for Anselm and me, as we worked for a long period to get this project to where it is today. Over at TNG I wrote a bit about why we need frameworks like these and what the challenges with current tools are: Generally we start a lot of our projects in kind of

INIT is based upon HTML5 Boilerplate and adds more structure for SCSS files, JavaScripts, includes build tasks and a whole lot more.

Introducing INIT – A Boilerplate Framework for Front-End Projects

We don't need this anymore With Modernizr v2.7.0 we don't need this work around anymore. Please update to this version if you use &lt;main&gt;. tl;dr: You can add the new main-element to Modernizr 2.6.2 by using HTML5 Shiv's window.html5 option to add your own elements to the shiv. Since I use some bleeding edge stuff in HTML and CSS in actual projects for clients I ran into one particular issue a couple of times lately and I thought I share a little workaround with you. Modernizr's current state Modernizr includes HTML5 Shiv to make HTML5 elements like header, figure and

You can add the new main-element to Modernizr 2.6.2 by using HTML5 Shiv's window.html5 options to add your own elements to the shiv.

Add the <main>-Element to Modernizr 2.6.2

tl;dr: It's necessary to keep the focus within a dialog while tabbing through it. The function below is the easiest way to implement this behavior in JavaScript. When I created CSS Modal I wanted it to be accessible for screen readers and people that only use the keyboard for navigation. Nicholas Zakas has a great post that helped me a lot with making CSS Modal accessible without too much work. This posts explains a bit about aria roles, how to use tabindex and how you set focus to the element initially and bringing it back where it was before when

It's necessary to keep the focus within a dialog/modal while tabbing through it. The function developed is an easy way to implement this behavior in JavaScript.

A Few More Words on Accessible Dialogs/Modals

In the last couple of months I've worked on several projects that needed an overlay with some content on it. Some front-end frameworks as for example Bootstrap refer to them as modals. You can find a lot of implementations that do exactly what I search for but they all have one major drawback: They rely on JavaScript. Yes, sure, everyone has JavaScript enabled these days but why use a technique that you don't necessarily need for a given problem? Also most implementations have drawbacks when it comes to mobile devices and responsive web design in general or accessibility. Apart from

CSS Modal is a project that builds modals and lightboxes out of pure CSS with a little bit of JavaScript. Fully accessible, mobile-friendly, fast and small.

CSS Modal - Modals built out of pure CSS

Introducing CSS Modal

While it is possible to consume nearly all means of content on your smartphone or tablet it seems like the dream of a paperless office comes true for a lot of web developers. But digital natives are not the only ones who are on the web. There are still some people that like to print web sites on paper. Once you are aware of that you might want to include a dedicated print stylesheet into web sites you build. Here is some advice on what you can do to get the best out of your page. Disclaimer: This article was

The current state of printing web pages using the browsers' default method - for web developers and designers. Printing web sites using the latest CSS rules.

Printing The Web

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

A quick overview of my current status and why there are little updates.

Speaking Engagements, the .net-Awards and Freelancing

Yesterday (17. January 2013) I was talking at TakeOff Conference in Lille, France. I actually extended my talk from the Fronteer&#8217;s Jam Session &#8220;Writing Awesome Code&#8221; 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&#8217;re not here, you are missing out on something :)&lt;/p

TakeOff Conference: Talking About Good Code

Since a while now word has spread to use the CSS unit rem for font-sizes and values in CSS. Here I want to explain how you can use a fallback in Sass or LESS to get rem working in all browsers. View Gist with mixins Why rem? Let&#8217;s look into what rem means. We know of the em unit which is relative to the font-size of the parent element it is defined on. This means if one of the parents in the DOM-tree changes its font-size, the font-size of the child element changes too. In contrast the rem unit is

Often it is advocated to use the CSS unit rem for values in CSS. Here is an explanation how to use a fallback in Sass/LESS to get rem working in all browsers.

The REM Fallback with Sass or LESS

It&#8217;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&#8217;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: BountySource let’s you define an amount up for grabs to anyone willing to solve your issue with an open source project. 5 APIs to change the

It's been over two years now – with Working Draft we have done 100 revisions. We recorded revision 100 on Monday and had a very special guest: Paul Irish.

Working Draft Revision 100

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&#8217;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

We 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.

New Resource for Web Devs: The Nitty Gritty

Within the last weeks I had the pleasure to attend some of the most valuable conferences in our business and meet awesome people to chat with. Finally I want to share some of my experiences and invite you what&#8217;s coming next. Smashing Conference Back in the end of September I attended Smashing Conference, set up by Smashing Magazine and Marc Thiele with some high quality speakers in beautiful Freiburg, Germany, the city where I&#8217;m currently living. Focusing on web design and development the smashing way this conference had a variety of topics from the latest secrets of CSS, on the

Within the last weeks I had the pleasure to attend some of the most valuable conferences in our business and meet awesome people to chat with.

Conferencing and Test The Web Forward

Here is how and why you should write awesome code in your team. I gave a 10 minute talk on that topic at Fronteers Conference at the Jam Session and here are the slides. There will be a video available online in a few weeks I think.&lt;/p

Writing Awesome Code – Fronteers Jam Session 2012

After Yeoman was announced in the end of June while it was still in private beta developers were looking forward to use it soon. It was introduced as a tool that helps developers building web-apps while not having to care too much about the general boilerplate-coding to build a solid base for every project and to help performing tasks to bring your project into production. Now that Yeoman is available for everyone as Open Source the question how to use it in daily projects arises. I&#8217;ll try to give you a short overview on what you can expect from it

Yeoman is here to help you saving a lot of time developing and deploying your web pages and apps. Find out why you should use Yeoman in your daily workflow.

Yeoman – Level-up Your Daily Workflow – Tool using Grunt.js

Yeoman – Level-up Your Daily Workflow

HTML5 Boilerplate is out with the new version 4.0.0. There were some significant changes since the last version that are listed up in the changelog (also see below). Most of them because of the excellent work by Nicolas Gallagher - thanks for leading HTML5 Boilerplate with such great effort. What&#8217;s new? This was done throughout the last seven months of development and resolving bugs: Add documentation in a separate folder - everything that is directly concerned with the project was moved from the wiki Switch from Public Domain to MIT license Separate Normalize.css from the rest of the CSS Improve

The HTML5 Boilerplate is out with the new version 4.0.0. Also Mobile Boilerplate has a new version and the HTML5 Boilerplate's website is redesigned.

HTML5 Boilerplate v4.0.0

Since some time I found myself defining a good starting point for a new project over and over again. While I use HTML5 Boilerplate in nearly all of my projects it&#8217;s not enough as an initial package. Since I&#8217;m using SASS (in its dialect SCSS) and have some other things I define over and over again I decided to set up a package that lets me start easily and includes a lot of tools that are necessary for my projects. This is an introduction to init, the starting point for projects that require a bit more than just HTML5 Boilerplate.

An advanced boilerplate for all medium sized projects using HTML5 Boilerplate, Grunt.js and other tools that are used a lot in front-end development.

An Approach on Building an Advanced Initial Boilerplate

Nicolas lists up his principles of writing CSS-code. A very good summery of what should be everybody&#8217;s guidelines. This goes deeper then what I wrote about my HTML and CSS Coding Guidelines and it tries to help people collaborating on styles. You should read this awesome piece of work!&lt;/p

Principles of writing consistent, idiomatic CSS

&#8220;Which CSS preprocessor language should I choose?&#8221; is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: SASS Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Chris Coyier finds an

Chris Coyier writes about the differences between LESS and SASS and compares the CSS-preprocessors.

SASS vs. LESS

After Harry Roberts published his HTML/CSS coding style I&#8217;ve decided to follow his call and write down how I like to code and what my guidelines for HTML and CSS coding are. This article is only a way to describe what I like to do – but it is by far not a recommendation or something. I have not really tried to “canalize” the coding style I do before but it is about time to do so and to write it down. Please let me know if you think that there are ways to do certain things better or in

After Harry Roberts published his HTML/CSS coding style I've decided to follow his call and write down my guidelines for HTML and CSS coding.

My Coding Style and Guidelines

Developed at Twitter to support our internal styleguide, RECESS is a simple, attractive code quality tool for CSS built on top of LESS. Incorporate it into your development process as a linter, or integrate it directly into your build system as a compiler, RECESS will keep your source looking clean and super managable. As I think reading the source is essential for developers to become good at what they do viewing this source in readable style is essential too. RECESS is a tool which helps you developing good-looking CSS with LESS. It is developed at Twitter and has now been

Twitter's RECESS is a tool which helps you developing good-looking CSS with LESS. It is developed at Twitter and has now been open-sourced. RECESS is a Node.js module.

RECESS – A CSS cleaning tool build on top of LESS

Please read about the updated syntax of CSS variables in the first and second update of this post. Since a little bit more than a month (as of the time of writing) there is a Editor&#8217;s Draft for a CSS Variables Module by Google (Tab Atkins and Luke Macpherson) and Daniel Glazman. Just a few days ago the Working Draft was updated. The first draft was written in 2008 by Daniel Glazman but was not added to the official specification. The new WD extends this proposal by Glazman. Disclaimer: This article is part of a small series about the latest

Since March there is an Editor's Draft for variables in CSS3 - the CSS Variables Module Level 1.

About CSS Variables

Since the beginning of February there were some proposals for the CSS3 specification. These proposals are not yet part of the specification and will likely be changed until they get adopted by the CSSWG. One of these drafts is the CSS Hierarchies Module Level 3. So what&#8217;s the Hierarchies Module? And why &#8220;Level 3&#8243;? The Hierarchies Module is not exactly new. It exists since the very first steps of CSS and was first released in Dezember 1996 with CSS1. The CSS1 specification is still up, so check it out if you want to. When you write CSS you always use selectors to target

There is a draft for the CSS Hierarchies Module Level 3 which introduces nesting for rules in CSS. This is what preprocessors do. CSS is about to adopt this.

About The CSS Hierarchies Module Level 3

I think all of you know Lea Verou&#8217;s dabblet. dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won&#8217;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

A Google Chrome App which displays all your dabblets.

Dabblet Chrome App

At /gebrüderheitz we use Git as a version control system as we think this is the best to work together on a level which is easy to learn and work with. Before we used Git we’ve used SVN but this is by far not as flexible as Git. There are enough posts gathering the difference between Git and SVN so I will not cover any of these. When working in a team it’s important to keep your different stages of development in sync and control somehow: There is a front-end development going on which is in deep connection with the

A short explanation on how to use Git's cherry picking in your projects to keep your code clean and organized.

About Git's Cherry-Picking

Christian &#8220;Schepp&#8221; Schaefer shows how to use the new filter-properties for CSS3 and combine them with methods implemented by most modern browsers. This article was first published in German on December 19th 2011.&lt;/p

Christian "Schepp" Schaefer writes about the new CSS3 filters and how to get them working across browsers with known methods.

Effects for the Web!

Some weeks ago I made a pull request for HTML5Boilerplate which should update jQuery to the latest version available on the Google CDN. How ever I copied the old version of minified jQuery because the uncompressed version was available but the minified wasn't. Stupid thing! That's why I created Is Mothereffin' jQuery up? The service checks three major CDNs for the availability of the latest jQuery version. View Is Mothereffin' jQuery up? How to Check if the File is up I had some difficulties to find the right method how to detect if a file is already available with JavaScript.

"Is Mothereffin' jQuery up" is a Tool I created to check if the latest version of jQuery is already up on the Content Delivery Networks.

Is Mothereffin' jQuery Up?

There is a big discussion going on at the moment covering the actual point of how to deal with images and media et al. on mobile-phones and other devices as there are some things that don&#8217;t work as on a desktop computer: Bandwidth Screen size Performance / Velocity The question is how to deliver responsive images on a mobile website. You maybe use something like img { max-width: 100%; height: auto; } in your responsive design to prevent images from being bigger then the screen of a mobile device. In most of the cases this shrinks images in its displayed

How can we deal with images and media when it comes to responsive design? Some thoughts and proposals that could improve the way to deliver media.

Responsive Media, Responsive Images in HTML5

Responsive Media

Somehow… <time> Disappeared As you might have heard the <time>-element was removed from the HTML5 specification last saturday by Ian "Hixie"; Hickson, the editor of the spec. Hixie decided to remove <time> and replace it by the more general <data>-element. A question that came up: Why got<time> removed and why did nobody stop Hixie? Well: There&lt;/p

There was a hugh discussion about the removal of the HTML5 time-element and replacement by the data from the specification. The W3C HTML WG solved this issue.

A Travel Through Time - and Back

Lea Verou publishes some really great stuff. Her latest work is Animatable. A tool to showcase the variety of things you can do with CSS3 animations. And it's awesome. Some weeks ago I had this article about rotating images like I use in the footer of this page. There is an animation in Lea's demos that makes use of the same properties. You will find some nice cutting edge CSS3-techniques in the demos so make sure to check out the source-code on GitHub. You can also contribute and check in a pull request if you want to. Edit: And by

Lea Verou publishes some really great stuff. Her latest work is Animatable, a tool to showcase the variety of things you can do with CSS3 animations.

Lea Verou's Animatable

We're doing a project these days where we use an accordion-menu to show some content. I want to share with you how I did this using jQuery and CSS. This is pretty easy and I want to encourage you not to use any plugin or so but to write the code yourself and learn a bit more about how to use CSS and jQuery and save some microseconds on your loading type. The HTML This is kinda straightforward I think. We don't need a wrapper for the accordion-menu. Check it: &lt;section id=&quot;experts&quot; class=&quot;accordion-item&quot;&gt; &lt;h1&gt;&lt;a href=&quot;#experts&quot;&gt;Experts&lt;/a&gt;&lt;/h1&gt; &lt;div class=&quot;content&quot;&gt;&lt;/div&gt; &lt;/section&gt; This is

How to Build an Accordion-Menu using CSS and a bit of jQuery

The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them. One of these more or less needed properties might be resize. It is part of the CSS3 Basic User Interface Module. What is really useful with resize is the ability to restrict the resizing of textarea for example. But it is possible to resize every element you&#8217;d like to as this demo by Simurai shows. There are four values for resize that are kinda logical: none: no resizing at all horizontal: resizing only horizontal vertical: resizing only…

The CSS3-spec is full of wonderful things one of these is `resize`. What is really useful with resize is the ability to restrict the resizing of elements

Resize Elements with CSS3

Some weeks ago Paul Irish published his article about TAFEE (Tiered, Adaptive Front-end Experiences) and shares Paul Boag&#8217;s booklet called &#8220;Where are my rounded corners?&#8221; which tries to describe why it is better to design for the future and modern browsers and not spending too much time trying to get the website&#8217;s design working in older browsers (namely Internet Explorer 7 and 8). The booklet was originally published in Paul Boag&#8217;s blog. Paul describes why he did this this: One of the biggest areas of confusion among our clients is progressive enhancement. They wonder why the beautiful design they signed off

Paul Boag's booklet "Where are my rounded corners?" tries to describe why it is better to design for the future and modern browsers. A German translation.

Where Are My Rounded Corners? - German Translation

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

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.

Wo sind meine abgerundeten Ecken?

With CSS3 be get some great new functions to use that are now accessible pretty easy. These are not only rounded corners or shadows but also transitions and full animations that let you do things that were only possible with JavaScript some time ago. In the footer of this website I use CSS3 3D-transitions for rotating two images. There is a front- and a back-site for that image. Through animation on click it looks like these images are rotating. I&#8217;m not the first one using this technique. I got inspired by Google+. They are using it for rotation of the

A short tutorial for the use of CSS3 3D-transforms for rotating two images. Letting two images through animation on click look like they are rotating.

CSS3: Rotate Images on Click

Sven asked me some stuff about the HTML5 Boilerplate Favicon PSD-Template while he was using it for a project. He discovered one problem I was not aware of and I don&#8217;t know how to work around: Android does not use one of the apple-touch-icons as a bookmark or as a shortcut on the home-screen in Android 2.3. I do not know of any other usage of the icons in prior versions of Android. But this article by Rob Flaherty stats that it is working for Android 2.1 and 2.2 with some minor changes. He also set up this demo-page. Feel free

Android does not use one of the apple-touch-icons as a bookmark or as a shortcut on the home-screen in Android 2.3. Why is this?

Touch-Icons for Android-Devices: Y U No Working?

This mothereffin shit is worth a blog-post. Even if it&#8217;s just a short one. At this very moment I&#8217;m celebrating the fact that Internet Explorer 10 now supports text-shadows kinda excessively! Finally! Even Internet Explorer made it! Yayyyy! For more details on this, please go and check out the Internet Explorer 10 Guide for Developers. Microsoft developers explain the usage of text-shadow here. But I guess it should be pretty clear how to use them as other browsers support them like forever. Thanks goes out to Louis Lazaris for his tweet about it. Also @IE tweeted about this. There are also

Microsoft now finally supports CSS text-shadow with Internet Explorer 10 Platform Preview.

Text-Shadow in Internet Explorer

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 &#8220;new&#8221; 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&times;144px touch icon where the PNG wasn&#8217;t saved by default. Version 2.0 – Update 21.03.2012 Daniel has updated the favicon template with a 144&times;144px touch icon. This icon is needed for the high-resolution iPad Retina displays which are built

Daniel Heitz designed a PSD template to create various favicons (touch icons). It has four different sizes and includes slices and meta-information.

HTML5 Boilerplate Favicon PSD-Template

This morning @t3node asked me about something CSS-related. This was kinda new for me because he never did this before I guess… He showed me a website he had printed and asked me to explain him, how it is possible to show links in printed websites with their reference printed next to it. He was kinda upset why not every frontend-developer includes this in his/her stylesheet when it comes to designing a new website. I wanted to explain everything that&#8217;s related to this topic that I&#8217;ve ever heard of but he asked me to write this blogpost as he is not pretty used to CSS

How to include references of links in printed versions of websites with CSS pseudo-elements and generated content.

Pseudo-Elements in Print-Styles for References in Links

You may be familiar with the syntax of writing code-Tags like <code>some code here</code>. This is what is used by Github for example. At Daring Fireball they wrote up the syntax. Not only for code-Tags but for various features that are connected to style and semantics. In the comments of this blog it is possible to use some of the rules to add some markup to them. For instance when you write: Some fancy text with styled markup and <code>code</code>. It will be transfered to Some fancy text with &lt;strong&gt;styled &lt;em&gt;markup&lt;/em&gt;&lt;/strong&gt; and &lt;code&gt;code&lt;/code&gt;. I really like to use these tags

Style WordPress comments with some special-chars instead of HTML.

Add Style-Syntax in Comments with `, _ and *

So the spec introduces a new attribute on a-tags (so called &#8220;links&#8221; &#8211; this may be new to you ;-)) called download (short: a@download &#8211; this technique of connecting attributes with tags is written up and documented by Mathias Bynens). When you link to a file like an image or a PDF-document it will be displayed within the browser normally. The download-attribute in links prevents this behavior and offers the file as a download in your browser. Definition The spec allows the attribute for having a value. This value can be a string which defines the name of the downloaded file. As a default

The spec introduces a new attribute on a-tags called "download". When you link to a file like an image it will be displayed within the browser. "download" prevents this.

HTML5 a@download - Download Files directly in your Browser

Offer Files as Download with a@download

When I read this article by Henrik Eneroth about redesigning Safari&#8217;s interface I thought we as webdesigners somehow do this with websites and web-apps. While Apple misses to add different behavior for different browser-sizes it&#8217;s a kind of standard to build a website with a special mobile version that looks not like the website on a desktop computer but fulfills the need of someone who visits the mobile version of the website. In Vitaly Friedman&#8217;s (Smasing Magazine) presentation &#8220;Webdesigntrends 2011&#8243; I recognized this nice photo. Vitaly states that someone who visits your page with a mobile device may need other

There are differences in designing a mobile specific version or a just a responsive version of a website. This not only affects websites but also apps.

Mobile Design is not only Responsive

In browsers we do not have the ability to automatically hyphenate continuous text. This is an issue when you are using text-align: justify; for instance because the text may look really bad. I want to write about this topic because of the discussion that came up at the HTML5 Boilerpates issue-list and this blogpost at Fontdeck Blog. The specification says: Hyphenation means splitting words to improve the layout of paragraphs. CSS3 Properties CSS3 adds six properties to the list of useful thing. These are: The most important one is hyphens. More to this one later. You can add dictionary-files with hyphenate-resource

In browsers we do not have the ability to automatically hyphenate continuous text. This could be resolved with the CSS3 property 'hyphen'.

CSS3: Auto Hyphenation for Text-Elements

You do know the nice message which is submitted to your smartphone when someone mentions you on Twitter? iOS gets these messages via push. This means the server tells the app something like &#8220;Hey look, there&#8217;s something new on your Twitter-account&#8221;. On Android this is done with push, too. It was introduced in version 2.1.0 in mid of July. Before this release they requested all Tweets via &#8220;pull&#8221;: The app asks the server &#8220;Yo server, somethin&#8217; new here?&#8221;. Draw-backs? So where&#8217;s the difference besides the obvious? with pull the app has to connect to the server in a certain time-interval

How to use push and pull notifications with JavaScript and HTML5 WebSocket and Server-sent Event.

Push and Pull with Server-sent Event and WebSocket

The Difference between Push and Pull

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&#8217;m a front-end developer located in Freiburg, Germany. Maybe you&#8217;ve head of this city: Smashing Magazine is based here, too. I&#8217;m currently working as a freelancer at /gebrüderheitz with people like Daniel and Steffen. I&#8217;m also engaged in some projects: I do some fancy stuff with Christian (we do Pagetimer), with Daniel I&#8217;m developing WordPress-Themes for Themeforest under the name Flipthemes (you should checkout this

Hans Reinl

From the Blog

What You Can Do to Advance Your Software Engineering Career

Working Draft Podcast

Companies I worked for