Firefox tab bar on mouse over

Since Firefox 57 I’m using Tab Center Redux for showing my tabs on the left side. Because of that (and since screen space is precious) I didn’t need the default tab bar and so I disabled it with the hack I found in the wiki of Tab Center Redux:

#tabbrowser-tabs {
visibility: collapse !important;
}

I found this solution quite useful over the last months, but recently I got some web design to do and split my screen horizontally in half. In this mode the width of the sidebar used to much space. Disabling it with F1 also didn’t really help because then I had no tab list at all.

Today I got the idea of only showing the default tab bar, when necessary. Since I can’t capture keys with CSS (and I didn’t find a way to create a user JS file like userChrome.css) and pressing a key to show and hide would be too much work, I got the idea of showing the tabbar when hovering.

Animated picture of the Tabbar showing and hiding.
Click on the image to enlarge it.

The trick is to show a small rest of the tab bar above the address bar by default (in this case 5px). Only when the mouse cursor hovers this area, the full tab bar is shown. The following CSS code does this:

#TabsToolbar {
min-height: 5px !important;
max-height: 5px !important;
opacity: 0 !important;
}

#TabsToolbar:hover {
max-height: inherit !important;
opacity: 1 !important;
}

To use this, you have to paste this CSS code in your userChrome.css file.

How to run a web app on your desktop

Running a web app or a website on your desktop is nowadays much easier thanks to GitHub’s Electron.

Why would someone want this?

Well… This is a good question. For me there are only two reasons: you can start it from your launcher and it’s handled as its own application. But thats not why I’m writing this guide. My motvation is simple: It works.

Continue reading How to run a web app on your desktop

A new design for marcel-kapfer.de

Today I roll out a first version of the new marcel-kapfer.de. With this upload not everything is fully designed, but these missing pages will follow later this week or next week.

I decided to go in another direction using more subpages and the same design on every page, if it’s just a subpage or its own project.

While designing the new page I not only tried to create a beautiful theme but also to provide a smoother user experience through designing page change animations with JavaScript. What you can actually see is just the beginning 😀 . I’ll gonna improve the page animations to make them more seamless.

Continue reading A new design for marcel-kapfer.de

Week in Review

Last week a few big changes happend in my projects. Nearly every project had an bigger release.

  • Morse Converter Desktop Edition Version 1.1 (Sourcecode: https://github.com/mmk2410/morse-converter Web: http://marcel-kapfer.de/writtenmorse)
    The Desktop version of the Morse Converter has now the ability to show different languages. German is the first added locale and I hope that some people will submit more localizations.
  • Morse Converter Android Edition Version 2.0 (Sourcecode: https://github.com/mmk2410/morse-converter-android Web: http://marcel-kapfer.de/writtenmorse)
    May the biggest release this week was the version 2.0 of the Android Morse Converter. I re-wrote more or less the whole app to make it awesome. The biggest change is the Material design.
  • pBlog Version 1.0 (Sourcecode: https://github.com/mmk2410/pBlog)
    Another new project entered the public state last week and saw today the Version 1.0. pBlog is a blogging engine based on PHP, XML and Markdown and it is completly independent from any database. It tries to be as simply as possible. At the moment there are not much features included but more will follow. Right now you’re visiting a page created with pBlog.
  • My Website (Sourcecode: https://github.com/mmk2410/mmk2410.github.io Web: http://marcel-kapfer.de)
    My Website also saw a new release this week (to be exact: today). It is not just a small change – it is a completely new page. Less content and less subpage, simply reduced on the main content (programming). Also new: It is written in PHP to provide a few nice and handy features. Enjoy it!

I hope that I can continue such an amount of new stuff in the future even if I have not much time until middle of June this year.