Make an element inside a hidden element visible with CSS

Let’s imagine the following scenario: You have an element that should be hidden but one of the elements inside it should be visible. I’m sure everyone has had this problem before and tried to force it with opacity. At least I did.

But that’s not possible. As soon as you set an element to opacity: 0; all of it’s children will forever be invisible.

Read Article …

Koken – Any tips, tricks, recommendations?

Next week I’ll start a project which will be developed with Koken.

I’ve never work with Koken before but it’s predetermined for this project and I’m told it’s the right choice for the task at hand and I trust this statement. I’m looking forward to this new challenge and am curious to see how Koken works compared to WordPress — the CMS I know best.

Read Article …

Workplaces of Web Professionals, Part 1

I’m one of those people which often rearrange their workplace to someday find the perfect setup, which will probably never happen.

I love to know how other people work and how their workplaces look like. I enjoy scrolling through sites like Simpledesks or /r/macsetups. But I really wanted to know how other people working for the web are set up, so I made a list and started to write those people. I haven’t made it through the complete list yet and of those I wrote, a bunch are currently redoing their workplaces. So this is the first part and I hope one or two will follow.

Thank you to everyone who send me a picture and is willing to let us have a look into their private space. Enjoy!

Brad Frost 

Read Article …

Force a concatenation order with gulp.js

A while back I made a screencast explaining my gulpfile.js. Since then my needs changed per project and recently I ran into a problem with my js task.

The task should hint my manually edited scripts.js with JSHint, then concatenate that with jQuery and other third party scripts, run uglify and in the end save a scripts.min.js in a /dist folder. So far so good. Only problem was that the order in which the files got concatenated was totally random which is a problem because I needed jQuery at the top, then all the third party scripts and then my manually written code.

Read Article …

Say hello to

A few weeks back my good friend Marcel decided that he needs a new portfolio site to show off some of his best work to kickstart his freelance business. If you already follow me along for quite a while you know that we worked together a lot so it was a natural fit that I would develop the site.

Read Article …

Pushing to multiple git repositories simultaneously

I currently host private git repositories on my own server. This is relatively cheap and it gives me a feeling of security in case a service decides to shut down, gets hacked or whatever. It’s also in line with the Develop It Yourself methodology Bastian Allgeier wrote about recently.

But we all know that GitHub is THE place for open source code and the programmer community. Sometimes it can even act as a kind of resume. So there is certain code I want to have on GitHub, but also on my own server.

Read Article …


Somewhen last week Henning, my brother, decided he wanted to start blogging. The topic should be sports in general, but mainly soccer. We decided to use WordPress and naturally I wanted to build a custom theme for him.

So on the weekend we had a Skype session with screen sharing and build him a relatively simple theme. The name was clear pretty early on:


The focus should be the text, so we went for a single small column and the nice typeface Fira Sans.
He had a pretty specific idea for a logo, which we put together with my little bit rusty Photoshop skills. It would be nice to have the logo as an SVG, but I only had raster graphics to work with. Maybe I can rework the logo in Illustrator in the future.

I didn’t use any frameworks or the like for the frontend, only some styles from my own, incomplete boilerplate like my slim _normalize.scss. The site is complete responsive, but because of the simplicity of the theme, there wasn’t much to do to accomplish that.

On the WordPress side of things we use Cachify to cache and deliver static, minified HTML which speeds up the site tremendously. I also installed Statify so Henning can get a sense of how popular his blog gets. That’s about it.

It took us about four hours from idea to finished WordPress site. If you want to have a look at the code, it’s on GitHub:


Screenshot 2014-06-25 10.02.20

I’m doing it. Vim for two days already. Starting to get the hang of it.

My Setup

After getting several request from individual people wanting me to do this post, here we go. I will talk about my hardware as well as the software, services and tools I use as of June 2014.


13” MacBook Air

I had a lot of different Macs over the years, but settled for a 13” MacBook Air. I currently have the Mid 2012 model. It’s fast enough for the things I do, it’s incredible lightweight and I just love the wedged shape. I often use the MacBook solo and it’s so much nicer than the normal MacBook Pro’s, even though they got a lot smaller, too. Only thing that would make it even better is a retina display. And sometimes I think about switching to the 11” model. 

27” Cinema Display

As I said I often use the MacBook solo, but if I really need a lot of space, I’m really happy to have my 27” Cinema Display. You’re right, it’s not the Thunderbolt Display, but the display itself is the same. So no need to upgrade for me. 

Apple Wireless Keyboard & Magic Trackpad

I really like to work with the MacBook in front of the display and thus omit the peripherals and use the internal keyboard and trackpad.
If I decide to mix things up, I opt for the small Apple Bluetooth Keyboard which has the same layout as the internal keyboard of the 13” MacBook Air. I add the Magic Trackpad to the equation. I somehow like the internal Trackpad more. Not sure if it’s the size or the angle — or something else entirely. 

Apple iPhone 5S

I probably don’t have to say much about this. Works perfectly, is fast, beautiful and the camera is awesome. What else do you want? 

Apple (Retina) iPad Mini

I have both, a Retina and a non Retina iPad mini. I use the the Retina one mainly for reading books and long articles while I kept the other one for testing purposes. 

Android Phones

I have an Samsung Galaxy Nexus at home, but it’s not mine. I know that I need one or two Android devices for testing and will buy them soon.

Buy on Amazon 

AKG K550 headphones

I own a pair of AKG K550 headphones for when I don’t want to listen to music over the speakers. I find I can get focussed better while using headphones, even when I’m alone and it’s totally silent around me.

Buy on Amazon 

Windows PC

I have a stationary Windows PC which was actually for gaming but is now that I work from home also used for Windows and especially IE testing. In case it interests you, here is the list of gaming hardware:

Processor: Intel Core i5-3470 (3,2 GHz)
CPU cooler: Alpenföhn Himalaya
Graphics: XFX AMD Radeon HD7950
Display: BenQ XL2420T
Memory: G.Skill (8 GB)
Samsung 840 Pro Series (128GB)
2TB Seagate Barracuda 7200rpm
3TB Seagate Barracuda 7200rpm
Power Supply: be quiet! Dark Power Pro 10
Case: Fractal Design Define R4
Mainboard: Asus P8Z77-M
Mouse: Logitech G400
Keyboard: Razer BlackWidow Tournament Edition
Headset: Logitech G35
Mousepad: Steel Series


I have several external hard drives for my Time Machine backup and for archival purposes of my photos and some other stuff.
I also have a 2.1 sound system from Creative, which is probably a hundred years old but still works fine for me.


Sublime Text 3

I use the Sublime Text 3 beta for all of my coding and have no problems whatsoever. I want to give vim a try in the future, just to get a feeling of why some others like it so much, but at the moment I’m just the fastest with Sublime Text. I don’t like huge applications with site management and all this stuff, so my Sublime Text looks very minimal, that’s how I like it. 

iTerm 2

By now I do quite a lot on the command line and my app of choice is iTerm 2. It’s just what was recommended to me and I like it. It’s basically like the Terminal app but with some extra features. 

Google Chrome (Canary)

I’m known for switching my browsers but most of the time Chrome is my default browser. It’s where I feel most comfortable. I often use Chrome Canary (the bleeding edge version of Chrome) as my main browser to test drive all the latest features. It goes without saying that I use almost any browser on a daily basis because of testing. 


All of my code is version controlled and I use git for that. I can’t recommend that enough. Get on the git-train. 


I recently made the move from grunt.js to gulp.js. It’s key to my development process as it helps me preprocess my Sass, minify the CSS, concatenate Javascript, reload the browser, and so on. It’s fast and relatively easy to use. I made a screencast explaining my gulpfile.js as well. 


I know, there are built-in solutions for local development and I did it like that for a while but MAMP is just so comfortable and easy to use that I stuck to it. I start my servers and quit the app after that. The servers keep running and because I hide the dock icon nothing is left. Nice and clean. 


This is a little tool that I helps me measure things on screen and also provides a magnifier. I can activate it through CMD + Shift + D. It doesn’t do much else, but I couldn’t live without it. I just wish I could hide the menubar icon. I recommend you uncheck the “Smooth images in loupe” option. 


Quotes, ideas, lists, short writing — Simplenote is the place where I keep all of my text based thinking. 

OmniFocus 2 / TeuxDeux

I’m currently in the process of organising my daily freelance life and am using OmniFocus for creating todo lists, projects and so on. But I’m also trying for as a simpler approach which might suit me better. So no clear recommendation on this side of things. Maybe I’m using a combination of both in the future. 

Photoshop CC 2014

I have the Creative Cloud Photography subscription which provides me access to Photoshop CC 2014 as well as Lightroom 5 and some other small apps like Adobe Edge Inspect. It’s just one of the things you need to have and this is a relatively cheap solution. 

iA Writer / Writer Pro

I often write short posts right in WordPress, but from time to time like to turn to a dedicated writing environment. This post for example is written in Writer Pro. Both apps are very simple and clean. 

Browser Extensions


My gulp watch task creates a LiveReload server to which the browser extension can connect and thus automatically reload the site any time I save a file. Make live easier.

Chrome Web Store 

PageSpeed Insights

Awesome extension from Google which gives you great advice on how to improve the performance of your site.

Chrome Web Store 


It’s not only a browser extension, but a complete app. Couldn’t live without 1Password. It stores all of my passwords and with a single keyboard shortcuts fills out login forms and logs me in. 


Sends the current site/article for reading later to Instapaper. 



I use IRC to stay up to date with a couple of friends throughout the day. It especially nice since I’m working from home. I’m also part of a few coding related channels like #respimg and #css on IRCCloud is the perfect service for that. I pay a small monthly amount and IRCCloud makes sure I’m always online and don’t miss anything. The iOS app does what it should and on Mac I created a fluid app out of their website. Works perfectly. They have a ton of great features and are adding more frequently. 

Webpagetest is a great way to test the performance of your site and improve upon the results. It’s free and there is no excuse not to use it. 

Meet Finch

Finch let’s you create a url pointing to your local dev site, that anybody anywhere can use. It’s great for showing progress to a client or just test driving your local site on a variety of different devices. It’s currently in free beta. 


Almost all of my files except for massive amounts of photos and the apps themselves live in my Dropbox. It’s reliable and I feel save. 


As I said all of my coding is version controlled through git. I use GitHub for that. Most of what I do is publicly visible but I also pay for some private repositories for client projects. 


Don’t want to miss Spotify and the endless stream of music for just a few bucks a month. 


Yes, I’m one of those guys from the past who still use RSS. Feedbin is my service of choice and it is amazing. The syncing is fast and reliable and the web app is one of the best I’ve ever seen, beautifully designed and fast as well. Reeder for Mac and iOS and a lot of other apps have the ability to sync with Feedbin if you don’t want to use the website. 


I do quite a lot of reading in the read later service Instapaper. I pay 1$ a month, I believe, to be able to highlight as many paragraphs as I want to. I think one gets also some other features. 

GMail & Google Calendar

This is the hub of all my e-mails and calendars. 

There’s probably something I forgot to mention, but I think I covered the most important stuff. If you ever further questions, just write an @reply, e-mail or Facebook post.

What Comes Next Is the Future

I have no idea how I missed this Kickstarter campaign to fund a documentary about the web, including dozens of interviews with brilliant people of our industry.

Go and back the project, I’m sure it’ll be awesome.

My CSS-Styleguide


Over the years of writing CSS I learned a lot of things from a lot of people. I tried out different methods and always kept the things I liked when it comes to writing CSS.

Now I wrote down some guidelines and ideas how I craft consistent and maintainable CSS. It’s important to note that this is a living document and is subject to change and is by no means complete. But it is a nice baseline to start from.

Anyhow, I wanted to share this with you, so maybe you can get something out of it, too. For me it’s time now to go through some projects, including this blog, and refactor a few things to match my own guidelines.

CSS-Styleguide on GitHub.