visuelleGedanken.de

Hello and welcome to the second Weekly Recap. I like the format and from what I’ve heard, you like it too. So here we go.

• Vertical align anything with just 3 lines of CSS
  What was a real pain the ass in the past is now pretty easy. Awesome tip by Sebastian Ekström, which I already used in production.

• How fast is fast enough?
  »It depends«, says Tim Kadlec.

• Mac OSX Screensaver Clock
  Not exactly a Web Development topic, but I just wanted to share this really awesome looking Mac OSX Screensaver Clock with you. It’s made by Robert Padbury, a former Designer at Apple.

• Web Performance Waterfalls from 10.000 feet
  Patrick Meenan shows common patterns of waterfall charts and explains what they mean and how to solve the problems. An article to bookmark for reference.

• Official port of Bootstrap to Sass
  If you want to use Bootstrap and are a Sass instead of a LESS user, this is for you.

• JavaScript: The Right Way
  Javascript is a very flexible language and you can do with it, but you can also do very bad and trash the performance of your website. This is a nice guide to bring you on the right track.

Der ein oder andere erinnert sich vielleicht noch an Philipp, Marcel und mein kleines Seitenprojekt watched.li. Offenbar ist es gerade in der aktuellen c’t angekommen. Das ist schön, vor allem weil ich die kleine aber feine Plattform nach wie vor jeden Tag nutze. Und das ganz ohne Social Features.

Hier, @knuspermagier in der c't: pic.twitter.com/hffUYzvFca

— Philipp (@Filzo) January 15, 2014

Die Battlefield Community hat das große Easter Egg gefunden, von dem mal ein DICE Entwickler sprach. Ich zeige euch wie ihr es auslösen könnt. Viel Spaß!
Abonniert HorridoMartin für mehr BF4 Videos.

While working on a responsive website the question came up whether CSS background images are being loaded by the browser if the element they are applied to is set to display: none;

My initial reaction was that I thought they will be loaded even though they aren’t rendered by the browser. After creating a test case on CodePen (see the code below), I was proven right – sadly. All CSS background images will be loaded by the browser no matter if they are rendered on the page or not.

BUT this isn’t true for Firefox, which is much smarter and always only loads the images that are actually rendered.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>

.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  background: url(s.gif);
  
  @media (min-width: 499px) {
    display: none;
  }
}

.box--m {
  display: none;
  background: url(m.gif);
  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
  }
}

.box--l {
  display: none;
  background: url(l.gif);

  @media (min-width: 800px) {
    display: block;
  }
}

Test it yourself with this CodePen.
Let’s have a look at what we can do to avoid loading unnecessary CSS background-images.

Instead of creating three different elements and using display: none; to hide them you can just change the background image according to media queries. This will only load the image that is actually displayed.

<div class="box box--s-m-l"></div>

.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s-m-l {
  margin-bottom: 40px;
  background: url(s.gif);
  
  @media (min-width: 500px) {
    background: url(m.gif);
  }
  
  @media (min-width: 800px) {
    background: url(l.gif);
  }
}

CodePen Testcase.

In this special case this will work, but let’s say you have three boxes with different content and different background images and want to show either one according to viewport size, just using display: none; won’t do the trick. That’s sad, but it’s the way it is, at least for now.

What you can do is set all boxes to display: none; and only when the media query applies show the box and set the background image. This way you only load the image you are actually showing and you can have different boxes.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>

.box {
  display: none;
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  @media (max-width: 499px) {
    display: block;
    background: url(s.gif);
  }
}

.box--m {  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
    background: url(m.gif);
  }
}

.box--l {
  @media (min-width: 800px) {
    display: block;
    background: url(l.gif);
  }
}

Try it with this CodePen.

Auch wenn es die letzten Wochen über etwas ruhig im HorridoMartin Channel war, habe ich immer noch wahnsinnig viel Spaß an Battlefield 4. Heute habe ich beim Durchsehen des Videomaterials der letzten Wochen und Monate eine coole Runde Rush Defense auf Langcan Dam gefunden, die ich euch mit Musik zusammen geschnitten habe. Viel Spaß!

Hey guys! Instead of posting a lot of small link posts throughout the week at clutter up the feed, I thought it might be better to post one article at the end of the week that highlights the best articles, tools, thoughts, etc I found over the past week. So here we go. What do you think?

• Web Standards Killed the HTML Star
  Are HTML and CSS gurus no longer needed in todays web?

• Use your Mac vhosts with your iPhone and iPad
  Incredibly helpful for local development. Could be a little annoying if your Mac gets a new IP address often and another problem is that for me the normal internet connection isn’t working.

• iOctocat
  Pretty good GitHub iOS App with a nice iOS 7 design. It’s free but has two in app upgrade options for more functionality.

• Ten reasons we switched from an icon font to SVG
  Ian Feather explains the reasons and thoughts behind switching the Lonely Planet website from an icon font to svg images. Very interesting read.

• Combine Google Fonts
  A handy trick for saving http requests if you use several different Google web fonts.

• Smooth state animations with animation-play-state
  It’s still an experimental technology and needs some vendor prefixes and is generally subject to change, but being able to stop and start an animation with CSS is pretty cool.

• Finding real happiness in our jobs
  I think the title of this article by Christian Heilmann is a bit misleading, but nevertheless worth a read. It’s about the state of the web, what we’ve done with it and what we should do.

• Cascading HTML style sheets
  Almost 20 years ago — a proposal for CSS. A lot has happened since then. Without this proposal I’d perhaps be an Astronaut or a Rock Star.

• Best of CodePen 2013
  The guys around Chris Coyier put together a page highlighting the most popular CodePens of 2013.

• The Value of Content
  Andy Beaumont says we are fighting the second world pop-up war. He might be right.

As you might know, last year I worked at superReal, an agency for mostly fashion e-commerce sites. Not much of what I did there can be found online at this point, but I just saw that two things are published that I built over the last few weeks in December.

I’ve made a new partly responsive homepage for DEYK.com as well as a new fullscreen slider. Because there wasn’t much to see from me in the past I thought I’d share this one with you.

Web Fonts are a big thing in Web Development at the moment and I think they will be for a long time to come.

While there are very good paid font libraries like Typekit or myfonts.com or the relatively new cloud.typography.com by the awesome H&FJ there is still the Google web fonts library, which contains a lot of really good free to use fonts.

What I did in the past was, I downloaded the fonts I wanted to use to host them on my on server for having total control and minimising my http requests. But a while back Sergej and I discovered that you shouldn’t do this even though you can. And here is why:

If you use one of the solutions Google presents you with, they will actually serve different, optimised font files depending on the browser and OS of your visitor.

Awesome, right?

I for one place the link tag in the head:

<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

For a little performance boost you can add this line to your head before loading the font to prefetch the Google Fonts DNS:

<link href="//fonts.googleapis.com" rel="dns-prefetch">