Geschichten aus Ghana Trailer

Ich poste hier ja nicht mehr all zu viel fremden Inhalt, aber für den Trailer zum Film “Geschichten aus Ghana” muss ich da mal eine Ausnahme machen. Bereits die wenigen Szenen haben mich irgendwie berührt und ich freue mich auf Mai, wenn sowohl das Buch Logbuch Ghana von Steffen erscheinen wird wie auch der begleitende Film von Dokumentarfilmer Valentin Schüle.

Weekly Recap

It’s already sunday again, so here I am bringing you a bunch of hot links gathered over the past week. It’s a nice mix of technical posts and articles about meta topics concerning developers.

wolf_20140329_009

Open new iTerm2 tab in current directory

While I work on a project I usually need two iTerm tabs. One to start and monitor my grunt tasks and one for doing git. So every time I start working I have to navigate to a folder two times.
So I searched for a way to open a new tab with the current directory but didn’t find anything. (Yes, for most projects I have an alias, but it’s still more “work”.)
But what I did find instead was an option to always open a new tab with the current directory. And that’s all I need.

Go to Preferences -> Profiles -> General and under Working Directory choose Reuse previous session's directory.

iterm

Using and clearing the Browser Appcache

I’m currently experimenting with the HTML 5 App Cache. It’s important to know that the HTML5 appcache is different from the normal browser cache. Basically you link a manifest appcache file in your html which has instructions on which files the browser should cache and which it should always load new.

<html manifest="cache.appcache">
    Your site goes here.
</html>

Example contents of a cache manifest:

CACHE MANIFEST

# These files will be explicitly cached
CACHE:
index.html
css/styles.min.css
js/scripts.min.js
img/logo.svg

# All other files require the user to be online
NETWORK:
*

In my recent experience the cache works very well, sometimes even too well. It will delete and cache all files new which are otherwise explicitly cached if you change anything in the cache manifest file. You could for example add a timestamp. But this seems to not always work or be at least a little dogged. So if you want to delete the appcache of Chrome for example manually you can do this by going to

chrome://appcache-internals/

and just delete what you don’t need anymore. It’s also just interesting to have a look at what you already gathered while surfing around the web.

In Safari it’s not that easy, but you can find an explanation on stackoverflow.

To have a look at your caches in Firefox you can go to

about:cache?device=offline

But you don’t have the option to delete them there. For that you have can go to Preferences -> Advanced -> Network. Here you find “Offline Web Content and User Data”.

Go ahead and experiment with the HTML5 app cache. It’s pretty cool especially for mobile web apps.

Weekly Recap

Hello lovely readers. This week was a busy one for me so I didn’t manage to read a lot and thus the list is a little shorter than in the past. But there are still very good articles in here. Have fun!

wolf_20140329_013

Weekly Recap

Hello everybody! It’s sunday again and this means it’s time for some link tips for you guys. A lot of good stuff this week. Let’s do this:

Using BEM Syntax with Sass 3.3

As you might know I’m a big fan of the BEM Syntax. If you haven’t heard of it, it’s basically a way to name your CSS classes in a way that makes sense and gives everybody involved with writing CSS for the site some knowledge of the structure. It really helps to write modular CSS and makes it easy to understand the code even if you get into a project later on.

BEM stands for Block Element Modifier. Here is an example to get you started:

.nav {
    // This is the BLOCK
    margin-bottom: 20px;
}

.nav__item {
    // This is the ELEMENT
    color: #000;
}

.nav__item--active {
    // this is the MODIFIER
    color: #1193e5;
}

Some people don’t like how the notation looks, but I assure you it works really well and even some people I first had to convince are totally stoked now.
Now let’s look at Sass 3.3 and what it has to offer.

With Sass you can use & to reference the selector which is already in place if you want to nest code. Just like this:

.nav {
    margin-bottom: 20px;

    & a {
        color: #000;
    }
}

This compiles to the following CSS:

.nav {
    margin-bottom: 20px;
}

.nav a {
    color: #000;
}

That’s pretty nice and straightforward and helps a lot in authoring CSS. With Sass 3.3 it gets even better if you are a BEM guy or gal. Now you can write our first example like this and get the exact same CSS output only that your Sass looks cleaner and you have less to write:

.nav {
    // This is the BLOCK
    margin-bottom: 20px;

    &__item {
        // This is the ELEMENT
        color: #000;
       
        &--active {
            // this is the MODIFIER
            color: #1193e5;
        }
    }
}

The CSS output looks as follows:

.nav {
    margin-bottom: 20px;
}
.nav__item {
    color: #000;
}
.nav__item--active {
    color: #1193e5;
}

I haven’t used that in production myself yet, but I will as soon as possible because I think it’s great. But I can imagine that if one would nest to deep it can get a little confusing. But the good thing is, just because you use it in one place doesn’t mean you have to use it every time. Nevertheless, make sure you Sass follows some kind of style guide.

Now if you ask yourself if you have Sass 3.3 installed you can check this by typing

$ sass -v

into you console of choice. If you are not on 3.3 you can update with

$ sudo gem install sass

After installing check if everything went well with

$ sass -v

As of writing this post Sass is at Version 3.3.4 (Maptastic Maple).

If you have any questions or suggestions, feel free to send me a tweet at @_martinwolf or write an email at martin@visuellegedanken.de

Hope this article helps some of you. Have a nice day!

wolf_20130824_001@2x