This June will be a full month of free time to think, explore, mock up, prototype, whatever. People can go solo or put together a team – it’s entirely up to them. This is a month to unwind and create without the external pressures of other ongoing projects or expectations. We’re effectively taking a month off from non-essential scheduled/assigned work to see what we can do with no schedule/assignments whatsoever.

That’s so cool and I think it’ll work out great for them.
On the one hand more companies should do things like that, but on the other hand only a few are able to put down their day to day work for one month and still be reasonable profitable, I think.

Read this on visuelleGedanken

I stopped at ‘Tab Width: 4 – Use spaces instead of tabs’, thought about it and didn’t check it. Until today I always used tabs to indent lines. I thought it was clearly the better way because it’s just one key stroke to delete an indentation. But since there is that option I wonder what the advantage is and how you handle indentation of lines?

Update: As it turns out in the comments, using spaces is the better way. A good editor (like Coda 2 or Espresso 2) will delete tab generated spaces with one key stroke. Going with spaces you also make your code future proof, backwards compatible and perfectly readable on every OS. Now I think this should be standard in every code editor. Do you hear me, Panic?

“Designing in the browser” is a myth – there is no such thing. Nobody has ever done it, and nobody ever will.

As I’ve said.

Read this on visuelleGedanken

You’re using a web browser we don’t support.
Try one of these options to have a better experience on Facebook.

Facebook stops supporting webkit browsers. That’s a bold move, which I don’t understand. Yeah, Chrome is made by Google and they are not best friends with Facebook, but Chrome recently became the ‘most used Web browser‘. Besides, the webkit engine is great in any regards.
So does anyone know something about that move by facebook?

Update: Okay, I might have gotten that wrong. Facebook isn’t saying that they stopped supporting webkit browsers – but they definitely don’t recommend using them either, which is still awkward.

Read this on visuelleGedanken

I’ve been analyzing my process and the process of those around me and figuring out how best to structure code for projects on a larger scale. What Ive found is a process that works equally well for sites small and large.Learn how to structure your CSS to allow for flexibility and maintainability as your project and your team grows.

Just bought SMACSS, a book by Jonathan Snook about all things CSS. I know how to write CSS, but working on a big project like QUOTE.fm made me realize that writing CSS and writing CSS are not always the same. Crafting a robust, large site is much harder than throwing together a simple WordPress theme. Yesterday was the first time I applied a class to an element and forgot, that I already used it for a total different part of the site.
So while I have already learned a lot building the Front-End of QUOTE.fm, there is still so much to learn. I hope SMACSS will help me refine my CSS skills for large scale sites.

Read this on visuelleGedanken

Over the years I have developed a set of rules for writing my CSS. For example I order my properties in a specific way. This makes it a lot easier to find specific ones if I need to change them later and I also have a good procedure while writing the code. For example I always define the display first, then I do the positioning and so on. Some of my rules make sense, some don’t, but I’m used to writing it that way and it helps me to work faster and better.
The overall thinking behind my order is that I first define general things like what the element is, where it sits, how big it is. Then I define the things in the element, beginning with the typhography. In the next step I work myself to the outside with things like border or box-shadow. And at the end I place some general stuff like overflow and z-index.

Today I want to show you my order. I might have forgotten some very rare properties, but I think I covered the most used ones. In reality you’ll probably almost never have to write all these properties at once, but if you had to (I had to once), it could look like this.
Maybe it’s something you want to adopt for your own code or you can just look how I work. Either way, here it goes:

.myclass {
    content: '';
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    position: static;
    float: none;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    padding: 0;
    max-width: auto;
    max-height: auto;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    color: #000;
    font-family: 'Droid Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 15px;
    text-align: left;
    text-indent: 0;
    text-decoration: none;
    text-transform: none;
    text-overflow: clip;
    text-shadow: none;
    letter-spacing: normal;
    vertical-align: baseline;
    white-space: normal;
    word-spacing: normal;
    word-wrap: normal;
    direction: ltr;
    -webkit-text-size-adjust: none;
    -webkit-column-count: 1;
       -moz-column-count: 1;
    ccolumn-count: 1;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    background: transparent;
    -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
    border: 0;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
        -ms-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
        -ms-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
    -webkit-opacity: 1;
       -moz-opacity: 1;
        -ms-opacity: 1;
         -o-opacity: 1;
            opacity: 1;
    -webkit-outline: 0;
       -moz-outline: 0;
        -ms-outline: 0;
         -o-outline: 0;
            outline: 0;
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
    -webkit-transition: 0;
       -moz-transition: 0;
        -ms-transition: 0;
         -o-transition: 0;
            transition: 0;
    visibility: visible;
    clear: none;
    clip: auto;
    cursor: auto;
    overflow: none;
    z-index: auto;
}

I’m very interested if you might have some similar rule or if you just write your CSS as it pops into your head. Write a comment or publish a blog post about your rules and let me know it. Cheers!

In a nutshell: The Smashing Conference is a friendly, valuable and inspiring community event that will help designers and developers become better in their work, be it front- or back-end development, UX design, content strategy or running a business.

From September 17th to 19th 2012 the first Smashing Conference will take place in Freiburg, Germany. I’m really tempted to go there. Price is €249 for the first 70 tickets and then €349 for the remaining 280. That’s a lot of money, but is anybody going?

Read this on visuelleGedanken

Sytax Highlighting for LESS in Coda 2 (based on the CSS.mode supplied with Coda 2)

For Coda I had Syntax Highlighting for LESS because it didn’t recognize LESS as CSS and there are also some differences in the syntax itself. So here it is for Coda 2. Thanks Paul!

But I think in the future I’ll need the same for SASS.

Read this on visuelleGedanken

Who do I really have to tell why I wanted to go to Middle Earth New Zealand? I definately didn’t have to tell my friends from YOOtheme, which is why they handed me a voucher for one of the Lord Of The Rings tours when I left three months ago. Of course, now that I’m here, I have to check out the locations we all know and love from the movies.

That’s SO cool. It gave me goose-bumps looking at these photos from Florian, a good friend of mine, standing in spots where Lord of the Rings was filmed.

Read this on visuelleGedanken

A fresh approach to web code. Bursting with features but without bloat. Built to make your life better: Coda 2 is the editor you’ve always wanted.

As promised, Coda 2 is finally released. If you have the slightest urge to buy it, I recommend you do it now, because it’s for sale for only 39,99 € ($49). That’s 50% off, only today.
I bought it last night but only took a quick look. I’m so excited that I can’t wait to start working today. More about my experience with Coda 2 as the days continue and I really know how good it is. But I’ve no doubt this will be may editor of choice for a long time. So was the original Coda.

Diet Coda, the iPad counterpart is also out. I bought it but haven’t looked into it at this point. It’s 7,99€ ($9.99).

Read this on visuelleGedanken

.mydiv {
    background: url(img1.png) no-repeat 0 0, url(img2.png) no-repeat right bottom;
}

This works just fine for all mayor up-to-date browsers and even on mobile. But if you want to make this work in IE8 or just need more flexibility in positioning your images, there is another way to apply up to three background images. And let’s be honest, have you ever needed more?

The problem with positioning background images is that you can’t define the gap between your image and the right border of your element. You can only say that it should be all the way to the right or define a distance between the left border and your image. Same problem with positioning at the bottom. This can be very frustrating when working with flexible container.

Pseudo elements :before and :after

Ever heard of the pseudo elements :before :after? Both allow you to inject content into your HTML with CSS. Sounds weird, but it’s great. But be aware, it should only be used to inject style-like content. If you want to know more about those pseudo elements, I strongly recommend to watch this talk by Chris Coyier at Front End Design Conference 2011.

So in theory we have an element, which we can give a background image and two pseudo elements, whoch can be an image and therefore function as an background image. The downside is, those can’t be repeated.

Real world example

But let’s say you have a flexible element and you need an image on the left side and the other one 50px from the right side no matter how wide your element gets. (We could also apply a third, repeating image as a normal background image to .mydiv.)
We just use :before and :after, make them as big as the images are and position them where we want them to be. And everything without the need of additional markup.

.mydiv {
    position: relative; /* this is needed that the pseudo elements position themselves according to the dimensions of .mydiv instead of body */
    width: 70%; /* flexible width */
    height: 200px;
}

.mydiv:before,
.mydiv:after {
    content: ''; /* you have to define that to make the pseudo elements work */
    position: absolute;
    top: 0;
}

.mydiv:before {
    left: 0;
    width: 50px;
    height: 70px;
    background: url(img1.png);
}

.mydiv:after {
    right: 50px; /* positioning this image 50px from the right border of .mydiv wouldn't be possible with 'background' */
    width: 60px;
    height: 40px;
    background: url(img2.png);
}

So that’s it. In the example I used two separate image, but you can also use a sprite, which would be problematic when using the background.

By now I’m very often working with those pseudo elements, not only to apply background images. They are really powerful, but always keep in mind, that CSS is for styling, not massive content creation.
So both ways, classic background images and pseudo elements have pros and cons and you have to decide which way is the best solution for your problem.

If you want to play around with the numbers or just see this thing in action I made a jsfiddle for you.

Coda 2 is big. Really big. It’s been five years since the original version of Coda launched, and this new major release brings a lot of features that Coda users have been clamoring for

In-depth review of the upcoming Coda 2 by Andy Soell. I haven’t had time to read it but I don’t want to hold it back until I have. So here you go.

Read this on visuelleGedanken

Hey Harry, I know a little bit about you from your blog and twitter, but if you had to introduce yourself with three sentences, what would you say?

Hey! I’m 21, from the UK, a designer, developer, writer and speaker. I am a Senior UI Developer at BSkyB where I specialise in elegant, scalable solutions for massive front-ends. When I’m not coding I’m usually flying round on one of my bikes

Great! When and how did you start diving into web development and design?

I was about 16, I think. My friend Sam and I were dead set on being graphic designers and we were making loads of different things—both paid and un-paid—just to have fun. After a while I decided that we needed a portfolio site to host our stuff so I started looking at building websites.

It was then that I realised that I’m a terrible designer and a far better developer so that became my thing; I used to just tinker with code on loads of throw-away projects just for the hell of it. I kept on and on and eventually landed a full time role at a great, aaward-winning agency in the UK when I was 17.

I’ve not looked back since, but there are a lot of people on the way I’m very grateful to.

It seems you got very good at a fairly young age. Did you attend any conventional design/development school or are you completely self-taught?

Cheers! I am entirely self taught, yeah. I found I loved building websites so much that I decided that I could teach myself enough not to bother with university. As a result my knowledge is a lot narrower than most (I don’t know JS, for example) but a lot lot more honed; a lot more detailed.

My style of learning keeps adapting, too. I learn things in context which gives a greater understanding than being taught it second hand by someone in a lecture room.

Yeah, I like that way of learning. I think it speaks for our industry that you were able to land a pretty good job without a formal education. Did you like working at a big agency?

It’s because—as an industry—we love to share! There’s stuff out there that people write for free that beats formal, paid education into the ground.

Sense wasn’t necessarily that big—about 40 or so people—but it was a hell of a lot of fun. I absolutely loved working there. There was a massive variety of clients, project sizes and a lot of fun to be had. It was the best first-proper-job I could have wished for. It gave me chance to grow on the job and gain a lot of experience in working with people, as a team.

So why did you leave?

It’s a very long story but the company wound itself down over a period of months. It didn’t go bust, but they saw that it was time to make the move to close down operations before things got that far. It was during the really bad economic downturn a couple of years ago and Sense was always super-committed to ethical operations so they closed the doors while there was plenty of cash left to keep everyone happy. A very, very sad day but they acted incredibly responsibly. Everyone from there still keeps in touch, In fact, I just met an old ex-Sense colleague for lunch only an hour ago

That’s sad, but I experienced something similar and also am still in touch with my ex-colleagues.
Now you work at BSkyB, so I imagine you are part of an in-house team? How did you end up there and what’s it like working for one “client” only instead of working at an agency?

It is sad, but the fact we’re both in touch with our colleagues speaks volumes for the people involved.

Yeah, it’s a fairly massive team as well! I ended up there after they advertised a Senior UI Developer role. I went in for a chat to ‘sound them out’—I was really apprehensive about a large corporate; worried that they’d have to support IE6 and that they’d want round corners in all browsers etc. They’re really clued up though and they said right away that they want to take a real progressive approach. I was impressed so, at 20, I decided bite the bullet and try to apply for my first senior role!

Working here is really different to working on lots of clients. I work on a number of projects so there is variety and there’s no such thing as a rush-job. All projects are agreed in-house so there are no ridiculous deadlines, you can really get stuck into a project and see it through. There’s more incentive to do a better job because once you’ve built the site you can’t just forget about it. I’ve learned more in my year at Sky than all three years previously.

That sounds really good.
So you don’t have to support IE6, phew. What about IE7 or IE8? We at QUOTE.fm decided to support IE8, but stopped looking at the site in IE7. But I could imagine that’s a little bit harder to do when you work for a big company?

Nope, no IE6 at all which is a massive help. IE7 and IE8 we had to support on the last project we rolled out. I was the sole front-end dev on SkyBet.com and that took about a year or so; I managed to get it done with no IE stylesheets—as I said before, we’re given more than enough time to make sure we do our work properly so there’s often very little need to hack front-ends together. At an agency, where you typically have much less time, cross-browser support is often more of a pain than at a big in-house team.

Let’s talk about your work setup. Which hardware and software do you use for your everyday developing needs?

At work I run a dual-screen Windows PC with Notepad++, Git, Photoshop, Chrome and Spotify as my main tools of choice. I also have a 17″ MacBook Pro.

At home I run a MacBook Air with the same software as above but TextMate as my text editor.

(I much prefer Mac to PC, obviously…)

That’s pretty simple and straight forward, but no external display at home? I am sorry you’ve to work on Windows all day. I had the pleasure for two and a half years at one of my old jobs. Luckily I can work all day with my own MacBook Pro since nearly one and a half years now.
Ever used a CSS preprocessor and languages like LESS and SASS? What do you think about them?

Yeah, I do also have an external display at home for my Air but I tend not to use it (I do most of my coding away from the desk, if I can). The Windows thing was my own choice, but I became a Mac convert about a month after starting here at Sky (having opted for a Windows desktop). My own fault!

Pre-processors aren’t really my thing. I installed Sass at the weekend and it’s cool, but the way I write my CSS means that a pre-processor won’t actually help me all that much.

I’ve spent the last year or so really honing and refining an OOCSS approach in vanilla CSS and this largely negates the need for a pre-processor entirely. Where I imagine they may be useful is variables and vendor prefixes but mixins and nesting et al can often be circumvented entirely by just architecting your CSS properly.

I use LESS and am very happy with it but one has do be very careful not to fall in some traps with preprocessors. But I will take a closer look at Object Oriented CSS, thanks.
How many hours a week/day do you invest in doing personal work in the evenings?

I think they’re good, but need to be used properly. To say pre-processors are bad would be like saying knives are bad; it’s not the tool, it’s the person who’s wielding it! I’m looking forward to trying to roll some Sass into my workflow, if I can

Oh a lot. I couldn’t give an exact number but it’s high. Most of my time lately has been spent preparing for a talk I gave at Front-Trends in Poland and also working on faavorite, so not as much writing as I usually do.

I’m hoping with talks out of the way I can redesign my site (it really needs it!) and get writing more.

Speaking of Front-Trends. I read your write-up and am very excited and want to be there next year. What was it like to be on a stage that big and do you plan on speaking a lot more at conferences in the future?

It was absolutely terrifying. The most people I’d ever spoken to before was about 50 in a small room in Barnsley; a tiny little town in the north of England. Front-Trends was 470 and I was so nervous.

That said though, the entire Front-Trends experience was the best thing I have ever done in my life. I’ve never had so much fun! Despite my nerves my talk went well (or so people have told me; it was all a blur for me) and I’m definitely up for doing more

Cool! Do you know if the talks were recorded and will be up on YouTube or the Front-Trends site?

Yeah they were, I’m not sure when they’ll be up though—there were ten hours of talks! I’m not looking forward to seeing mine too much; I imagine the nerves will show.

Let’s talk about your newest project: faavorite.com. What is it about, how did the idea come up and who do you build it with?

faavorite is the result of two developers’ frustration with the way Twitter handles (or rather, doesn’t handle) their favorites feature. We basically built an app that lets you search, organise, tag, discover, read (and more) your (and other peoples’) Twitter favorites. It’s pretty awesome…

It’s a project by me and Nick Payne. It’s been really fun working on such an involved and massive project with someone who is first and foremost a friend, I’ve loved it. faavorite is still well in its infancy at the moment, there’s lots more to come.

QUOTE.fm also started out as a side project with two friends and now we able to do it full time and hired an iOS developer. So good luck with faavorite!
How long did the development take until now and if you have to name one or two things, what did you learn?

That’s awesome, good work! We need a plan for faavorite; it’s so much fun and so much more than just a hobby project!

faavorite went from idea to live in about three months. It was such a massive project, particularly from Nick’s point of view. He’s done a lot of seriously impressive stuff. I jokingly refer to myself as Chief Float-Clearer on faavorite because that’s honestly about as important as I feel at the side of Nick…

I learned a fair bit but the biggest single thing I learned is don’t be too critical if you don’t have context.

By this I mean that by just looking at someone’s source code you shouldn’t judge their development decisions. I used to be terrible for this, saying stuff like ‘I could do that in three less elements’. True—maybe you can—but that means that so can the developer who did it, so why didn’t they? Looking at the source code of faavorite I have absolutely no doubt that people will be like ‘WTF?! How many divs?!’ but each line of code in that build is accounted for. Everything has its own job, everything has its own purpose.

I learned that pretty code is second to powerful code. It’s better to write ‘uglier’ code that never breaks than it is to avoid using three more elements and have something really fragile and flaky.

In short, I learned that you can’t critique because you don’t have the context.

Thank you! Three months is pretty awesome. You two did a good job! I think what you just said is so true and I’ve experienced the same here with QUOTE.fm.
Maybe you can uncover some future features of faavorite?

Thanks, it was pretty full on at points; I was working all day here at Sky then getting to work on an evening too. Nick’s still done most of the work, though!

Yeah exactly, you find it more and more with complex apps. I’d much rather use an extra div and know that nothing will break than not use it and keep having to change code!

I wish I could but we don’t even know ourselves! We have some pretty awesome ideas around weekly faavorite summaries, and community curated stuff, but it’s all up in the air at the moment; what we need to do is beef up our capacity ready to get promoting the app fully!

That sounds pretty good. Looking forward to your development.
With a lot of personal work in the evenings I know I tend to sit in front of the screen all day until I go to bed. What do you do when you need some time away from coding and the screen?

Cheers, me too!
Well I never watch TV (I’ve not turned my TV on since 2011) so it’s unusual I’m not at my computer in the evenings. I listen to a lot of music and, although I’m far from a chef, I do love cooking. I spend at least a good hour or so an evening cooking/eating. When I’m not doing that I love to get out on one of my bikes. I currently have a trials bike and a single-speed roadie which are two bikes just designed for pure fun!

Can you do any tricks on the trials bike?

I can do some (link for outside the US/UK), but I’m not great. Due to work things I don’t get to ride half as much as I’d want to—I’ve just had a year off, too.

Wow, I think that’s pretty cool. So let’s wrap this thing up.
The last one: What question would you like to answer, that I didn’t ask?

How about… ‘What next?’

So. Now really the last one. What next, Harry?

I’m not 100% sure myself really. I know that I’ll be here at Sky for a while yet. Nick and I met (properly) at Sky and we were saying just the other day that we could probably never go back to agency life.

Agencies don’t face the problems massive in-house (and very technical) teams do. With an agency you don’t have great ownership of a project; you build it and get shut of it. There’s no incentive to architect anything or think about 6, 12, 24 months down the line in quite the same way there is in-house.

Other stuff, faavorite needs a plan; we need to work out a strategy for the product and what we want from it.

I was considering taking a week off work and rewriting inuit.css to be super OO—make it an incredibly powerful but design-free CSS framework, but that’s undecided yet.
I think I’d also like to speak at another conference or two.
I have loads of ideas but nothing really certain—I guess I’ll cross each bridge as I come to it

Sounds great. I wish you all the best for your future. Thank you very much for your time, Harry. Maybe our ways will cross some day on a conference or so.

You can find Harry on Twitter, github and of course on his widely popular blog csswizardry.com.

It’s hard to imagine why there’s been such a vehement defense of the img set markup. The picture element provides a wider number of potential use cases, has two functional polyfills today (while an efficient polyfill may not even be possible with the img set pattern), and has seen an unprecedented level of support from the developer community.

Great piece by Mat Marquis about the current state of proposed solutions for responsive images markup. On the one hand there is the img set and on the other hand the, to me and many other developers, much better picture element.
Make sure to stay up to date and read the whole piece.

Read this on visuelleGedanken

We made Coda 2 better at everything.

So it can make you better at everything.

Finally.
There is a short video to get a first impression, but I really can’t say anything until I’ve tried it myself. There will also be Diet Coda – Coda for iPad.

I’m really excited about this update. I was waiting for it a long time and I really hope it will pay off.

Read this on visuelleGedanken