Recently, I’ve been reading a bit about PGP and GPG, so now that I actually know what I’m doing, I decided to migrate to a new keychain.

As far as I know, my old keys have not been compromised, but the private keys are stored on OneDrive (password-protected, but still, PGP is a good time to be really paranoid ;)).

Details about the keys

Old keychain:

pub   rsa4096/FD525189 2015-04-05 [SCA] [expires: 2020-04-03]
      Key fingerprint = 61F4 C465 4DE2 523A 0F72  F06F 5317 BC1B FD52 5189
sub   rsa4096/B9ACAEAE 2015-04-05 [E] [expires: 2020-04-03]

New keychain:

pub   rsa4096/5C65C3D4 2016-06-20 [C] [expires: 2017-06-20]
      Key fingerprint = 89DC 9AD7 B97F 5362 0FF5  AF16 BCC0 9F8B 5C65 C3D4
sub   rsa4096/9275C482 2016-06-20 [S] [expires: 2018-06-20]
sub   rsa4096/4037B984 2016-06-20 [A] [expires: 2018-06-20]
sub   rsa4096/8189A15D 2016-06-20 [E] [expires: 2017-06-20]

How do you know it’s actually me who is doing this?

You can find a signed version of this post here, since Jekyll barfs when you try to add the PGP headers and footers around your Markdown files. It’s signed by both my old key as well as my new key. You can also verify that the signature of the commit adding this post is my old key (the repository is right here). GitHub will probably not show the “verified” badge once I’ve replaced my key there with the new one.

Generating these keys

My previous keys were generated using the default settings, but this time around I took a bit more care.

The master key, 0x5C65C3D4, is only used for certification. It was generated on an airgapped machine running Tails, its private key is only stored on an encrypted USB drive (not on any of my computers). This allows me to keep my identity if my subkeys would be compromised.

Join me in promoting good security!

Let’s start using good security practices together! From now on I’m signing all my e-mails. If you want to contact me, don’t hesitate to encrypt your messages. One day, we’ll all be James Bond ;)

These articles really helped me through this journey. Hopefully you’ll enjoy them as well.

• Alan Eliasen’s excellent GPG Tutorial He walks through many of the day-to-day uses of GPG and teaches you a lot of good practices regarding keeping everything secure.
• Mike English’s step-by-step key generation guide Mike gives you simple instructions to generating this kind of super-safe keys.
• The Debian Wiki entries on Keysigning (basics of working with PGP keys), AirgappedMasterKey and Subkeys (the subtleties of separating your master key from the subkeys)

As an assignment, you have to write the HTML of a website without thinking about styling. Then, you have to create the layout with only CSS (no HTML changes or JavaScript allowed).

What do you do?

You find out everything you can about Power CSS™ to blow everyone’s minds, of course!

Here’s Ten Amazing Things You Didn’t Know You Could Do With CSS:

Make a dropdown menu

This one’s pretty simple and has been done for years:

ul.dropdown::before {
  content: 'Menu';
}

ul.dropdown > li {
  display: none;
}

ul.dropdown:hover > li,
ul.dropdown:focus > li {
  display: block;
}

A “Menu” link will appear before your list, and the list will become visible when you hover over that link. The :focus part is necessary for when you’re on a touch screen—otherwise the menu will disappear as soon as you lift your finger.

Make a hamburger icon

That “Menu” stuff is so 2010. Now hamburger icons are all the rage! We’ll make one with plain CSS, creating a block for the middle line and two box-shadows for the top and bottom lines:

See the Pen Hamburger icon dropdown by Marcel (@mrcl) on CodePen.

Toggle it!

What if I told you…you can make a toggle in pure CSS? The problem with interactive things in CSS is that there’s no way to save state. But what you can do, is create a hidden checkbox field and use CSS selectors to do things based on the state of that element.

Let’s upgrade our menu so you can click it to expand:

See the Pen Toggleable menu by Marcel (@mrcl) on CodePen.

The label wrapper gives us two advantages:

1. You don’t have to specify an id attribute for every dropdown checkbox you make. Because the input is inside the label, it doesn’t need a for attribute.
2. Since the entire menu is also the toggle button, you can hide the actual checkbox easily and you have TOTAL MODDING FREEDOM.

Numbered headings and figures

If you’ve ever written a scientific paper or report in HTML (that’s what the WWW was made for initially!), you might have written some nasty JavaScript to count headings, figures and whatnot (or, god forbid, even hard-coded those numbers in your HTML).

But don’t worry my dear, your days of torment are over! For we can use the magic of CSS to add numbering to your headings, figures and everything you could dream of. Let’s do it.

See the Pen Numbered headings and figures by Marcel (@mrcl) on CodePen.

Animations on page load

Show off your design skills by animating your logo every time someone visits your website!

It’s pretty easy, actually. You just need to define some keyframes and attach them to the element(s) you want to animate.

See the Pen jqaQgo by Marcel (@mrcl) on CodePen.

Add icons to special links

You’ve probably used attribute selectors like input[type=checkbox]. Now, there’s more where that came from! You can match based on part of the value, the beginning or end and more! Check out the MDN Documentation for all of them.

You could use this to add a cool enevlope icon to all mailto:-links, or Wikipedia-style icons for external links:

I frequent unicode-table.com to find these icons.

See the Pen ONOryB by Marcel (@mrcl) on CodePen.

That’s all, folks!

Do you feel like a CSS magician now? Got an idea for even more POWARFUL CSS? Let me know!

De laatste paar dagen heb ik me bezig gehouden met jouw computer onder handen te nemen, en nu zouden je zorgen verdwenen moeten zijn.

Dit is er precies gebeurd:

• Alle nasty programma’s zijn weg. Een heleboel gespecialiseerde programma’s hebben gezocht en getermineerd.
• Er staat een (gratis) anti-virusprogramma op (Avast; dat ronde oranje icoontje)
• Je computer is helemaal geüpdatet
• AdBlock Plus is geïnstalleerd. Bye-bye, reclame op het internet!

Toch zijn er nog een paar dingen die ik wil verduidelijken.

Het kan dat er nog steeds een virus op je computer staat

Dit geef ik eerlijk doe: hackers zijn verdomd inventief. Ik heb zo veel mogelijk weggehaald, maar kan nooit garanderen dat je computer 100% veilig is.

Vooraleer we deze “ingreep” hebben gedaan, is het goed mogelijk dat iemand volgde wat je deed en het zou dus kunnen dat je wachtwoorden in slechte handen zijn. Het lijkt me een goed idee die te veranderen.

De meeste virussen komen op je computer omdat jij ergens op hebt geklikt

Als er plots een popup komt met “OMG 2154985132156 VIRUSSEN REGISTER OPTIMALISEER NU DOWNLOAD KOPEN”, sluit het gewoon. Da’s niet legit. Je anti-virus zal waarschijnlijk af en toe iets zeggen, maar hij gaat je nooit vragen een programma te installeren.

Neem een chill pill

Vanaf nu hoef je je veel minder zorgen te maken over al deze vieze beestjes op je computer. AdBlock zorgt dat je veel rommel op het internet niet meer ziet, zodra er toch iets binnen geraakt is Avast er om je te beschermen en als dat nog niet werkt word ik op de hoogte gebracht.

Dus neem een chill pill en bekijk nog wat filmpjes met kittens.

Aanbevolen

• Intel’s 5 Habits of (Practically) Unhackable People. Kort, leuk, heel goede raad.
• Pwnd. Gedetailleerdere uitleg. Als je dit allemaal in acht houdt, zal je nooit meer dit soort problemen hebben.

‘t Amusement! Als je nog hulp nodig hebt: je weet me te vinden.
Marcel :)