Blog

TIL: How to style the chrome headerbar on Lollipop

Posted on Dec, 03 2014, 0 comments

From time to time, I push interesting articles to my phone to read them on the go. So when I opened up an article about the upcoming ServiceWorker on HTML5 Rocks (something you should definitively read if you are interested in this stuff), I noticed something I haven't seen before: my headerbar changed to red. Being the webnerd that I am, I wanted to find out how they managed to do this and started investigating. Turns out it's pretty easy.

With Android Lollipop, Google added a new metatag that can be parsed by the latest mobile Chrome. So to put a little branding on the browser window, simply add this metatag to your header and pass in the hexcode of your corporate color:

<meta name="theme-color" content="#3e3e3e">

Somehow, this reminds me a lot of the days when we inserted some nasty CSS into our websites to overwrite the default styling of the browsers scrollbars. Except that styling the headerbar actually serves a real purpose. The custom headerbar looks especially nice if you see it in the overview of your recently open applications. Seeing tabs branded with the corporate color of the opened website instead of Chromes default grey headerbar, makes it a little easier to quickly navigate between them and gives websites a tiny bit more of this native feeling.

Anyways, I think it's at least a nice improvement for the corporate style of a website, especially since it does not require a lot of effort to implement.

Having said that, you might wish to check out my website on you Android Lollipop phone now, to see the headerbar in action. Or simply have a look on the screenshots below :-)

full headerbar exampleheaderbar while readingrecent apps overview

I looked beyond tellerrand

Posted on Nov, 26 2014, 1 comment

Three weeks ago I attended the first beyond tellerrand conference in Berlin. And I really got to say, it was an awesome experience.

This was the first time ever I attended a conference, so as you might imagine, I did not really know what to expect from it. In the past, I read a lot of blogs, listened to podcasts and watched some conference videos on YouTube. I noticed that I often took a lot out of watching people talk about things they are passionate about and I guess a lot of the stuff I learned over the past couple of years was inspired by watching videos of conference talks.

Somehow, actually attending a conference felt like the next logical step, something I wanted to do for a long time now. beyond tellerrand was one of the conferences I heard a lot about. It seemed like my entire german twitter timeline has been there in the past and everyone was always so excited about it. So when Marc announced that he was going to run an additional btconf in Berlin, right on my doorstep, I just had to buy a ticket.

And I guess I could not have picked a better occasion for my first conference. The lineup was pretty awesome and although there were ups and downs, I really enjoyed every single talk. But I guess what's even more important about this conference (and that's exactly what you miss out on when you just watch the videos) is the atmosphere around there. beyond tellerrand is full of really nice people who love to chat and connect. As a newbie to this whole scene, I felt really welcome there and I had some pretty nice conversations with folks I by then only knew via twitter or not at all.

And I think a lot of this atmosphere is due to the nature of the conference itself. You don't have to decide which talk to miss out on, because there is only one at a time. Which also means that everyone is on the same track and you get a pretty common ground to build conversations on. Which you have enough time for during the reasonable breaks in between the talks, or the casual get-together after the evening session.

Which leeds us to the most important thing about a conference: content. Every talk I listend to gave me something to think about, triggered the urge for discussion, or was inspiring in some way. So here are some of my favourites of the two days:

(I will link the videos of the talks here once they got uploaded :-))

Tim Kadlec (@tkadlec) - The Space Between

As an expert on performance related things, Tim talked about the space that originates between the execution of interactions. Like the time we spend waiting for content to load, staring at loading sipnner, or some other kind of rather useless animation. It is a space we often tend to forget about, because we usually do not develop those experiences on old hardware with a crappy Internet connection. Who cares about these few milliseconds, right?

Tim showed how even these milliseconds can make a difference and gave some pretty cool examples how to make use of these in-between spaces to show something more sensible than a loading spinner. In this context he also talked about perceived performance and how it can actually differ a lot from measured performance.

If you are in any way involved in something related to UX, or Frontend Design, make sure to checkout his talk. The workingdraft podcast also did a pretty interesting interview with Tim about his talk at beyond tellerrand.

Zoe Gillenwater (@zomigi) - CSS Lessons Learned the Hard Way

Zoe talked about the importance of making mistakes in order to learn something. She showed some of the mistakes she made along the way and how she actually learned a lot by investigating them. It really showed how important it is to screw up from time to time to get down to the basics and learn about the insides of the technology you are using. It is always nice to see that the ones you look up to also make mistakes and that it is actually a good thing, something you even need to do if you want to make progress.

As a bonus, I learned somme pretty neat CSS tricks and tips :-)

James Hall (@MrRio) - Security is Everyone's Responsibility

This was one of the talks that make you scared, entertained and give you the feeling you should change pretty much everything you're doing online at the same time. James talked about the current state of website security and gave some pretty cool examples on how easy it is to hack into data you're not supposed to see. I guess we need to be reminded  about how broken some parts of the web are from time to time and that we really should care about improving them.

I guess this was also the first time somebody could give me a really great illustration of how encryption works. Because of the non-existing WiFi (thanks Telekom), he improvised a little experiment with two guys of the audience to show how a message gets sent over the wire, encrypted, as well as in plain text. Educating and entertaining at the same time :-)

Stefan Sagmeister (@Sagmeister­Walsh) - Design and Happiness

Somebody told me that the evening talks at beyond tellerrand  are always kind of special. And yeah, I guess one can say that :-) Stefans talk about Design and Happiness was definitely one of the highlights of the whole conference.

He talked about the possibilities of achieving happiness as a designer and tactics to keep a healthy balance between work and leisure. For the climax of his talk I found myself standing in a room full of 500 webworkers singing together about the booboos of being a webdesigner or developer to the tune of "Freude schöner Götterfunken". It was a great kick-off for the following get-together and I guess at least this time, everybody left the room with a smile on their face :-)

So, thanks to everyone who made my first conference such a great experience. There are many really nice people out there and I can't wait to meet more of them. Because one thing is clear: beyond tellerrand really infected me and I'm eager to attend more conferences. I already laid eyes on some events that look really promising and of course: I already got the ticket for the next beyond tellerrand in Düsseldorf ;-).

So I hope to see some of you out there :-)

How Linting improved my coding skills

Posted on Nov, 03 2014, 0 comments

A while ago I was somehow involved in a discussion about linting code. Linting is this handy process where you throw your code into another program which then starts yelling at you for all the little bad practices and mistakes you've put in there, which will eventually break your code.

Or how Wikipedia puts it:

In computer programminglint was the name originally given to a particular program that flagged some suspicious and non-portable constructs (likely to be bugs) in C language source code. The term is now applied generically to tools that flag suspicious usage in software written in any computer language. The term lint-like behavior is sometimes applied to the process of flagging suspicious language usage.

Which might be a slightly better explanation.

What does actually happen?

So, linting applies a set of rules to your code and tells you where you should improve your it, not necessarily because you did something completely wrong, but because your code might cause some unwanted side effects you've not been aware of. E.g., a few years ago, I did this very frequently:

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function(e) {
        // do smth.
    });
}

If you throw this into a tool like JSLint, it will tell you something like

Don't make functions within a loop

Which is absolutely right. This code would work perfectly fine, but it is a waste of time and memory to declare the function in each iteration, plus at least when you come back here for debugging or refactoring, you might wish you would have made this a propperly named function like "doSomethingOnClick()" instead of an anonymous one, for reasons of clarity and comprehensibility. So this might bee a much better approach:

function doSomethingOnClick(e) {
    // do smth.
}

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', doSomethingOnClick);
}

(Sidenote: "doSomethingOnClick" is actually _not_ a good name for a function, it just serves as an example here ;-))

So, linting is a good thing

That is actually pretty great for a cuple of reasons. You may avoid common pitfalls, as well as your code will become a lot more clear and consistent. This is espacially great if you apply linting project- or company-wide, because your whole codebase will become much more consistent. This might be the first step to a code styleguide.

Back in the days, I used to copy my code, paste it into JSLint and then back into my code editor. Nowadys you can easily automate this to put it into a build-process with tools like grunt-contrib-jshintgulp-jshint, etc. I would even recommend to integrate a linter into you IDE or texteditor of choice. There are linting pulgins for almost every editor and I really like to see potential errors right after I typed them.

There is more

During the discussion I mentioned earlier, I started thinking why I started linting my code and what I actually achieved with it. And I realised a benefit that did not seem that obvious at a first glance, but really made sense once I thought about it.

I really started to get a much better understanding of the language itself after dealing with the error messages the linter gave me. To give an example: I still consider my self a, well, let's say not-so-much-ninja-rockstar when it comes to css. So, when I added a css-linter to my toolchain, my css files pretty much lit up like a christmas tree. One error I got pretty often was something like

Selector should have depth of applicability no greater than 3, but was 5

on a code block like this:

.topbar .navigation .ul .li a {
    // some styles
}

I never heard about "depth of applicability" and for all I knew, being explicit about my selectors was a good thing. So I started digging and it turned out that my very deep nested selectors had a big disadvantage that my project was already suffering from. The HTML markup was so tight coupled to my css, that I started to write additional rules for elements that looked similar, but had a different markup. There is an article on SMACSS that explains this problem very well.

So, by trying to get this error message out of my console, I not only cleaned up my css code, but actually started to get a better understanding of how css works and the place it should take inside my development stack.

What it comes down to

I think one should keep in mind that the rules a linter applies to your code are not the word of god and there might always be cases where what you've written is actually better than what the linter wants you to write. And that's perfectly fine (as you always have the option of modifying the rules to fit your needs). 

If you want to learn how something works, you have to use it until you fail, because then you're able to ask the right questions. And linting made me asked questions I never really thought about before.

Living on the bleeding edge

Posted on Aug, 01 2014, 0 comments

As Webdevelopers, we live in exciting times. The web and its technologies are moving faster than ever and one can easily get the feeling of not being able to keep up. Truth be told, it is pretty much exactly how I felt a few years ago. Since then, I discovered some channels that keep me up to date about what's going on in our industry. Listening to these channels really helps me to get better at my daily work, as I learn a lot about best practices, new tools, common mistakes, etc. So I thought it might be a good idea to share these sources and how I make use of them.

Reading blogs

This might be the most obvious one. Almost every tech-related article I read over the last while has been a blog post. I usually save links to interesting posts in my pocket and open them up whenever I got time to read them, which often means during a lunch break or in the subway. I actually read a lot on my phone, so I'm glad most tech-related blogs are responsive these days :-)

This is a list of blogs I find myself quite frequently on:

Smashing Magazine

Well known and a great resource for all web-related stuff. It's also the only blog I read that pops up on our designers monitors quite often, too :-)

CSS Tricks

A great resource for CSS-related stuff. This is were I end up most of the time when dealing with strange CSS problems. I also picked up some neat CSS tricks here (woah, killer pun :-D) that brought some structure and elegance into my noobish CSS.

Peter Kröners Blog

In german language. This is were I look first when I want to learn about early-stage technologies. Also one of the few webdev blogs that features linux stuff from time to time.

Sara Soueidans Blog

A blog I discovered very recently. I would highly recommend reading the articles about SVG to anyone interested in this topic.

Some more well-written blogs I visit from time to time:

Twitter

Twitter became my most powerful connection to the webdevelopment world over the last years. Webdevelopers seem to be very active on twitter and it is just amazing how easy it is to connect with them and to join discussions. You don't even need to be active on twitter to benefit from the network. I spent a long time there just consuming other peoples tweets and got a lot out of it.

Twitter is also the place where I pick up most of the blog posts I push to pocket. Most bloggers share new posts via twitter, so that others can reshare them. So when there's some cool new article out there, it will most probably end up in my timeline.

For me, in some ways, twitter is the replacement for the message boards I learned programming with back in the days.

Podcasts

Podcasts are one of the most brilliant things I discovered over the last years. Reading articles is a great way to get information and to form an opinion. But listening to a real discussion can be even better.

At first I tried to listen to podcasts while I was working, but it turned out that this was too much of a distraction. I either listened to the podcast and got nothing done, or focused on my work and didn't pay attention to the podcast. So by now, I mainly listen to podcasts while I'm in the subway or doing housework. Sometimes I even sit down on my armchair and finish the day with a nice glas of Single Malt Whisky and the latest episode of my favourite podcast :-)

This is a list of my favourite podcasts:

Workingdraft

A weekly german podcast about webdevelopment, primarily frontend stuff. This was the first podcast I listenend to and it is still my favourite. I guess I listened to every episode since revision 100 :-)

Shop Talk Show

A podcast by Chris Coyer and Dave Rupert, about frontend development and UX. Each episode with a different guest.

hanselminutes

A podcast by Scott Hanselman about web stuff. Each episode with a different guest.

Conference Talks

Watching Conference Talks is also a great way to learn about new things. There are a lot great conference videos on youtube and vimeo. When I work from home, I often spend my lunch break with a good meal and an (even better) conference talk. I especially liked the jsconf and btconf videos.

Bottom Line

So, that's how I try to keep up with what's happening in our industry and to educate myself. I would love to hear how others deal with this, as well as recommendations for other blogs, podcasts, etc. So please feel free to drop a comment, ping me on twitter, or write a blog post about it :-)

Resolve CSS Imports with gulp-cssimport

Posted on Jun, 21 2014, 0 comments

In my current build setup, I use SASS for writing my CSS and gulp as my task runner. Compiling my SASS code with gulp-sass works pretty well, but one thing kept bugging me for quite some time. 

There are a few cases where I have to rely on third-party CSS files. I use bower for dependency management and most libraries I require provide their own CSS file that I need to include somewhere in my website/application. Linking the file directly from the HTML is not an option, since this would create an additional HTTP request for each file, besides, I'd like to have all style-related stuff in one place. 

Another example is the use of Google Fonts. I don't want to rely on JavaScript for serving custom fonts and linking the file inside my HTML is not an option.

So in both cases I end up using an import-statement like the following:

@import 'http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Open+Sans:400,600,700';
@import '../components/library/lib.css';  

Unfortunately, this will be compiled to a classic CSS-Import statement which will also create an additional HTTP request.

I just recently discovered a gulp-plugin that helped me to get around this. It is called gulp-cssimport and basically parses a CSS file, finds imports, grabs the content of the linked file and replaces the import statement with it. Yay - exactly what I wanted :-).

I just added css-import to my build task and got rid of every additional request:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync'),
    cssImport = require('gulp-cssimport');

  gulp.task('css', function() {
    return gulp.src('./scss/**/*.scss')
    .pipe(sass({
        style: 'compact',
        sourcemap: true
    }))
    .pipe(cssImport())
    .pipe(autoprefixer('last 1 version', '> 1%', 'ie 8', 'ie 7'))
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({stream:true}));
});

It even works with remote resources like Google Fonts, so Page Speed Insights now has one reason less to yell at me :-).