How to manage 199 passwords

I’m using 184 unique passwords for 199 different websites. The average length of these passwords is 15,7 characters. Using a different password for each site is a choice I made a few years ago. As soon as you use a password for one site, that site can see that password and try to use that password on other sites. Imagen you sign up with your gmail email address on a malicious site. Wouldn’t it be easy enough for that malicious site to try to login with that password on your actual gmail account?

You probably wonder how I deal with 184 unique passwords. Well, it’s easy, you can use a password manager. I use LastPass as password manager. It stores your passwords in an online vault. The vault is encrypted on your local computer/device, so the LastPass company does not have your actual passwords, only the encrypted ones.

It is integrated in your browser with a plugin. This means that as soon as you hit a website with a login form, it fills in your username and passwords, that way you only have to press the submit button to login, or it can even auto-login if you prefer that. Whenever you are register on a website, it sees the password field and suggest to generate a password. I usually use that. You can also generate a password with a keystroke (alt-g).

Actually that means I don’t really care about passwords anymore, they are (if the site allows it) 20 characters long, auto generated by LastPass and when i visit the site it automatically logs me in. You basically never get to see most of them.  You can also share passwords with friends and family, auto fill in forms, store notes safely, maintain records of important documents (id numbers to block if they get stolen for example) and it won’t fill in your password in phising sites if you ever make a mistake and end up there.

LastPass needs a master password to function, you better pick a safe one for that, but it can limit logins to a certain country, use several different types of 2 factor authentication and can use One Time Passwords if you like. I’m not saying LastPass is perfect, I’m not saying I can not be hacked, but I know for sure that it’s a lot safer than using only a handful of passwords on 199 sites.

git.kde.org will be back and what you should be aware of

As you might have been aware of by now, git.kde.org broke down. Sysadmins are working hard to get it back online.

And soon it will. Now here is the problem: It could be possible that the last commit on git.kde.org for your repo isn’t that up to date as it should. If that happens and you try to force an update to your local clone and you notice an issue, then

please immediately notify the sysadmins without doing anything else

So they can try to find the difference between your local version and the git version.
Ideally you should also stay away from scratch repos until further notice.

It would look like this:

name@local:~/dev/src/kf5{frameworks}$ git fetch
From git://anongit.kde.org/kdelibs
+ abd4e22...6ae50bc frameworks -> origin/frameworks (forced update)
+ 67939b1...9c6a5be master -> origin/master (forced update)

You can reach them on freenode via IRC on channel #kde-sysadmin or on their internal mailinglist sysadmin@kde.org

git.kde.org down…

Shrek.kde.org is a powerful server that hosts git.kde.org and svn.kde.org. Both are virtual machines. Shrek’s operating system was dated and had run out of security updates, it needed to be updated. We planned that for the end of the week and this morning got the confirmation that the work could be done today.

We took down the virtual machines. Upgraded Shrek without problems. Then the 2 virtual machines were started again to resume normal operations. A few seconds later it became clear that the virtual machines had file system corruptions. We took down the machine’s and run fsck’s on the images. It reported double used blocks for ~300 files. The result is that some git repo’s are damaged beyond repair on the master server. SVN has been fixed and is running fine.

You would probably think that it’s not that bad, we have like four anongit mirrors around the world from which we can restore from. But there is a problem. A consequence of powering up the git server for a few minutes have been that the anongit mirrors have synced the corrupted repo’s, hence corrupted repo’s on the mirrors.

Luckily it seems we can restore bits and pieces from each mirrors and other tricks our git experts are implementing. All the sysadmins that have knowledge about this are on it and working hard to complete this difficult task. This includes Dirk Muller, Nicolas Alvarez, Jeff Mitchell and Ben Cooksley.

I’ll try to give more updates via identi.ca: http://identi.ca/kdesysadmin

Neverland can be build

Cranes In The Sky.Some of you dear readers might know about Neverland. The theme “engine” that drives a lot of our current KDE websites.

It is basically a design that is based on the Bootstrap CSS Framework, for which we write themes for the nearly dozen CMS we have. That includes phpBB, Drupal, Mediawiki, WordPress and others.

And that is the pain point basically. You have to maintain a lot of different theme files, all of them written in a different way, on top of a different CMS, with a different markup as well.

So we end up with one core css file on our CDN, and nearly a dozen customized css files for each of them. Plus the theme files.

That made me wonder if the situation could be improved with a custom build system. And after some fiddling – surprise surprise – i can proudly say i found a way to automate the build of each of those themes!

It – as of now – basically consists of a simple Makefile, which builds the CSS out of the less files, and fetches skeleton files to output theme files for each CMS, done with the help of node.js . The best is, not matter of what language the theme file is based on, it can be written.

It is extendable, every CMS gets its own build file. But the important thing is, you change your markup in one place, and each CMS theme can reflect that change.

Of course it is in a very early stage, and not finished, but once done maintenance mode goes down to just a single command and the server sync :P

That might sound quite boring for some, especially those who are used to build systems, but for me that is an exciting step forward. So exciting that i write such a blogpost.

Learn something new every day – Done for today 

 

 

KDE will start using SNI starting July 1st.

This is an announcement that the KDE Sysadmins will start using SNI on the KDE servers starting from July 1st. If you don’t know what SNI is, here is a small explanation:

This allows a server to present multiple certificates on the same IP address and port number and hence allows multiple secure (HTTPS) websites to be served off the same IP address without requiring all those sites to use the same certificate. It is the conceptual equivalent to HTTP/1.1 virtual hosting for HTTPS.

Simply put: IP-addresses (the old v4 ones) are starting to run out. Up to now we needed each and every https-site to run on a different IP-address. SNI makes it possible to run multiple https-sites on one IP-address. But if your browser does not support SNI, you get to see a certificate error.

We’ve pushed SNI to Qt  long ago, that way Konqueror supports it (from KDE 4.9.0), and all other main browsers we care about support it. If you run Konqueror with an earlier version of KDE, we suggest you reserve some time before July to upgrade.

If you want to test if your browser supports it, go to https://sni.velox.ch/. If you get certificate errors, then your browser does not support it. If the page says ‘Great’, than you can safely read the next blog now…

How much does KDE care for its bugs?

Good question. Let’s reveal some stats.

All time top commenters
Name Number of Posts
Dario Andres 34082
Myriam Schweingruber 23019
Christoph Feck 16342
Gilles Caulier 14737
David Faure 13684
FiNeX 12637
Stephan Kulow 12174
Aaron J. Seigo 11648
Christophe Giboudeaux 11289
Thiago Macieira 10167

Impressive activity there, i would say. But one more, the activity for only this year:

Top Commenters 2013
Name Number of Posts
Jekyll Wu 1062
Thomas Lübking 684
Christoph Feck 654
Myriam Schweingruber 503
Martin Gräßlin 495
Alex Fiestas 443
Frank Reininghaus 309
Laurent Montel 234
David Edmundson 227
Gilles Caulier 225

It is up to you to decide on a conclusion. But to me, this seems like someone really does care.

Customizing Bootstrap

Most people doing websites from time to time should already know the wonderful CSS Framework Bootstrap by now. Neverland, the theme project we use on a lot of KDE sites these days is also based on it, and i really like it a lot. It makes use of Less CSS, which makes editing and updating the CSS a charm.

Actually, i find it quite often when surfing the web. And that is the point of this post. I do notice it quite often, as many people seem to just put it on their website without any adjustments, just as is. And to draw the connection to KDE, i have noticed that on some small KDE app sites as well.

But why not give it a unique look and still benefit from the great predefined classes bootstrap offers? Shouldn’t take a lot of time. Let’s have a look.

Prerequisites

First, as i already said, Bootstrap uses several less files which finally get “compiled” into a single CSS file. And that is my personal favourite for working with Bootstrap. So i would recommend going to their github page and cloning the repo, as the download doesn’t have the corresponding less files, just the final CSS (and Javascript, if wished). If you cloned it, you will also get a folder called “less”. That is where the magic happens.

But another thing you would need is either the less.js file (for client side rendering of less files) or the less module for node.js. I won’t digg into this, just follow the links above to get an idea what fits best in your situation. For the sake of this tutorial i will use the former method and use client side rendering as long as we are going through it.

Planning

Of course we need a rough idea on what we want to reach. In this case i am thinking of what comes to my mind when i usually read tutorials. Coffee. Coffee and newspapers (or newsreaders). This means some typewriter like font, some brown, milky and smooth colors. We keep that in mind for later.

Let’s get started

We take one of the Bootstrap example files to work with. I decided to use “marketing-narrow.html” from the docs/examples folder. The default look is like this:default_example

Back to our less files from Bootstrap. The most important files are bootstrap.less and variables.less. The former is responsible for loading all the single less files into the final output. The latter holds the most common variables for the entire look of Bootstrap and should be your first stop to get used to Bootstrap.
And right on top we have some common color codes we could adjust. The defaults are:

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;

// Accent colors
// -------------------------
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #46a546;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;

Now remembering our initial idea to have something newspaper like, i think we should make the white a bit less white, and the black a bit less black ;) And maybe add some yellow to it. That means changing @white to something like #f4f4eb and @black to something like #232322.

Note: This is just an example, use whatever values you prefer

A generic customisation of the grays could be:

@black:                 #232322;
@grayDarker:            #3c3c39;
@grayDark:              #42423f;
@gray:                  #60605c;
@grayLight:             #83837e;
@grayLighter:           #c8c8c0;
@white:                 #f4f4eb;

These values will be used across most of the Bootstrap components already. But before previewing that, let’s also adjust the font for the headings. I like the use of font loading, so let’s see if we can find a good font online.

For including a webfont we also need to adjust bootstrap.less, and we use the @import method here. The top of bootstrap.less should now look like:

@import url("http://fonts.googleapis.com/css?family=Cinzel");

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

Now we also need to make sure headings will use it. Back in variables.less we change this section

@headingsFontFamily:    'Cinzel', serif; 
@headingsFontWeight:    normal;  
@headingsColor:         inherit; // empty to use BS default, @textColor

That’s enough to change all headings on every subsequent page we will publish. How does it look at this point?default_example2Looks like we are getting there, no? Already looks more unique. And we only altered 10 lines so far.

Now let’s see what we can do with the builtin mixins of Bootstrap. Looking through the mixins.less file we notice

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

Using this we could easily add drop shadows to elements with one calls that outputs all the necessary vendor prefixes.
I think the buttons would look nice with a drop shadow, don’t you think? They already have one, but not like what i prefer. Opening up buttons.less we can change

.btn {
...
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
...

to something like

.btn {
...
.box-shadow(0px 2px 3px 1px fade(@black, 50%));
...

This quick change shows also the magic of editing less files instead of plain CSS. We replaced a hardcoded color value with the global variable @black, but not only that. We also run the lesscss function fade() on it, which returns a rgba value of the color you provided.
Now, every time we think the black color doesn’t satisfy our needs, we change it in one place and all other references get updated as well. Hardly possible with simple CSS.

So, let’s have a last lookdefault_example3It is up to you to decide if this looks good (probably not). But the point was to show how simple it is to get a unique look while using a CSS Framework like Bootstrap. The limits are up to you.

To summarize: 11 lines changed, less than half an hour, new custom look. Hope that helped.

Now i wonder what i should write next, maybe dig more into bootstrap? How to implement Bootstrap in e.g. WordPress, Mediawiki? Give some more insight into Neverland, a highly customized Bootstrap variant?

Your choice, let me know in the comments.

Cheerio,

Ingo