Release Picturefill 2.2.0 Beta

Mat Marquis:

Assorted bugfixes, improvements to compatibility in AMD environments, minor improvements to performance and spec compliance.

A new version (2.2.0 Beta) of Picturefill is out. Go and update your sites.

Google: Updating our technical Webmaster Guidelines

Google Webmaster Central Blog:

Historically, Google indexing systems resembled old text-only browsers, such as Lynx, and that’s what our Webmaster Guidelines said. Now, with indexing based on page rendering, it’s no longer accurate to see our indexing systems as a text-only browser. Instead, a more accurate approximation is a modern web browser.

With this recent change performance matters even more. Namely for the Google ranking, too. Always keep in mind, web site performance is a crucial feature, not just a nice-to-have.

WordPress: Links to articles exactly one year, one month and one week ago

Recently I developed a simple WordPress Theme for a client and he wanted three links in the navigation which point to the posts exactly one year ago, one month ago and one week ago.

With the help from some friends in IRC I made it work without an additional plugin, which is always a priority for me when developing a WP Theme.

I’m everything but definitely no PHP expert or even a real PHP programmer so I’m sure you could easily write this more efficient. Feel free to post in the comments. Anyway, it works and it makes sense to me. Here it is:

Read Article …

How-To: Lists with text-align: center and correct list-style

Let’s say you have a standard ul or ol and set it to text-align: center;. Then you get this:

I think we can agree that that’s not looking good. You could just hide the list style with list-style: none; but that might not be acceptable. Another possible way would be to hide the list styles and create your own list style with a ::before pseudo element and it’s content property.

But there is a much easier way: list-style-position: inside;

See the Pen List with text-align center and bullets by Martin Wolf (@martinwolf) on CodePen.

Weekly Recap #CW42 2014

It has been quite a while since the last Weekly Recap. I had to take a break, I’m sorry. So let’s not waste any time and get right into it. Enjoy!

Read Article …

Finding my way back to CSS without ditching Sass completely

When CSS preprocessors came out a few years ago I was blown away by the possibilities and as soon as I started to work with LESS (which I later switched to Sass) I thought that I never want to go back.

Fast forward a few years to the present

CSS preprocessors have matured and new ones have been born. After dozens of projects using Sass I feel very comfortable using it. I know what it can and what it can’t do. I know of it’s usefulness and why people, me included, love it. Despite all of that I’m currently stripping back my usage.

Read Article …

Weekly Recap #CW37 2014

It’s sunday and that means it’s time for another Weekly Recap. Get ready for some easy deployment stuff and really good CSS architecture thinking, completed with Javascript animation. Enjoy!

Read Article …

Give the US Keyboard Layout a try

I recently switched from the german keyboard layout to the US one and it’s been a blast coding with it. Give it a try yourself!

Here is the mentioned special Keyboard Layout I use to still be able to easily type characters like ä,ö,ü, etc.
EurKey: http://eurkey.steffen.bruentjen.eu/layout.html

I edited the EurKEY Layout and swapped Z and Y, here is the download if you prefer that, too:
http://martinwolf.org/_files/EurKEY-qwertz.keylayout.zip

My YouTube Channel.

CSS3 transition end listener with jQuery

As you hopefully know CSS3 transitions are a lot more performant than good old Javascript transitions. But what if you want to kick off some Javascript/jQuery when a CSS3 transition has ended?

Here is a code snippet that has done a great service for me in the past:

$('#my-div-with-css3-transition').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    // Do your jQuery magic here
});

All those different transionend‘s are need for best browser support.

Weekly Recap #CW36 2014

Hello everyone, it sunday again and the past week flew by so quickly, I didn’t even post an article since last weeks recap. I’m sorry and hope to do better in the coming week. Anyhow, I managed to read a bunch of articles and have some recommendations for you today. Enjoy!

Read Article …