“Batman Evolution” by the Piano Guys

April 20th, 2018 @ 19:32

This is an absolutely amazing video made by The Piano Guys a couple of years ago, here’s a link to their channel on YouTube:
https://www.youtube.com/user/ThePianoGuys/videos

I have no idea why this video gradually disappeared from all of of their channels on YouTube and Vimeo… so here’s an attempt to restore a backup copy of it to the world of the Word Wide Web. :-)

Note: Keep in mind, even if manage to re-publish the video now, Warner Brothers or Sony or another big company will likely try to take it down pretty soon, for one reason or another. I’ll try to publish it nevertheless anyway — but if you don’t make an offline copy of it (while you still can), don’t blame me, later…

Monsters & Carrots: my little moment of fame

March 10th, 2018 @ 17:33

Perhaps not many people know but I am a contributing editor for Smashing Magazine for many years now. It all started a little less than 8 years ago (the summer of 2010, to be precise), when I was approached by Vitaly (the editor-in-chief of Smashing Magazine) who asked me if I’d like to help him create and manage the shiny new Adobe Fireworks section.

Fast-forward to today and what can I say? Adobe Fireworks is no more (although it will always have a place in my heart! and will probably have its icon pinned on my Windows taskbar as long as Windows keeps support for 32bit applications) but I have learned a lot during these years. I helped prepare and publish more than 40 (maybe more than 50 even… I lost count!) articles about Fireworks, about design, prototyping, and more; I worked with great people on my team; I collaborated online (and sometimes met in person) with many fantastic authors; and I learned a lot.

So when Vitaly asked me to say a few words (that were going to be published in the edition #200 of the Smashing Newsletter, I was more than happy to do so. Here’s what I said:

My work for Smashing Magazine started pretty casually as a side job eight years ago, while I was still deeply involved with web design projects and HTML/CSS. Vitaly invited me to become editor of the newly created Adobe Fireworks section in the magazine and since Fireworks was my primary UI design tool, things went really smoothly. Then, over the years, the magazine and the authors I was working with became more and more important to me. Adobe dropped Fireworks development a few years ago, but there were so many other exciting design topics to write about!

Working together with authors, editors, and experts, I learned how to be a better editor, and also a better author. The life change was subtle at the beginning, but by gaining more and more experience, at some point I quietly left the world of HTML/CSS coding. Nowadays, I am a fulltime technical editor in a Danish software company and during the nights I am still working on articles for Smashing Magazine.

Working with words helped me to unlock the creative side in me, and maybe this is one of the reasons why I started to work on a personal project of mine, the Monsters & Carrots series of drawings. My next big challenge will be to create and publish a book (or maybe several books!) full with illustrations from a crazy fantasy world. This is the biggest challenge at the moment — to “steal” some free time and find more life and work balance.

And lo and behold! I also saw one of my Monsters & Carrots illustrations featured in the newsletter! :-)

The Sea Mouse Dragon having tea with Mr Carrot

And I felt a little proud — just a little! :-)

And yes, I want to make a book (more than one, actually) full with my crazy monsters… and carrots. This will need time and effort but I will happily spend both of these for my little side project. Because I want to try and see what will happen.

Life is short. And when you feel you should try to do something, better try. Or just do, try not (to misquote Yoda a bit here).

Or… “Per aspera ad astra,” as old romans would say. :-)

Where is my status bar in Firefox Quantum? Here’s a way to restore it!

February 11th, 2018 @ 16:35

The new Mozilla Firefox Quantum is quite cool. It’s fast, secure, and it has great support for all the latest “bells and whistles” in HTML/CSS/JS.

Firefox Quantum

One thing is missing though — OK, maybe not one, but one that highly annoys me: the status bar.

Firefox Quantum: searching for the (missing) status bar
And I am not the only one — Google “predictive results” suggests that probably thousands of people search for the status bar in the latest Firefox release.

To be fair, in Firefox 56 and earlier, the status bar was in a way missing too. But there was this excellent little extension that could bring it back in just a click: install Status-4-Evar, and bingo, the status bar is back! :-)

But what’s a status bar, you may ask? Usually it’s a little ribbon near the bottom of the browser’s window which can display a variety of information whenever needed. For example, while a web page is loading, the status bar may display brief glimpses about its loading progress. Or, when you mouse over a link on a page, the status bar will display the URL even before you click on the link. Handy!

When a web page is loading, the status bar may display brief glimpses about its loading progress
When a web page is loading (1), the status (2) bar may display brief glimpses about its loading progress.

In one word: the status bar is something very, very useful!

Here’s the catch though — you can display the status bar in a few different ways:
a) it can be either permanently on display at the bottom of the browser window (which was the default for all browsers only a few years back);
b) or, you can display and hide it based on context — which is the new default for most browsers, including Firefox.

In my opinion, displaying and hiding the status bar based on context, is not ideal UX (user experience). Page is loading and the status bar “pop-up” shows at the bottom of the browser window; page has loaded — status bar disappears; you mouseover one or a few links on the page you’re reading — and the status bar shows then hides then shows again… On/off, on/off, on/off… hundreds of times! It’s visually distracting.

A bit of history: Google Chrome was the first browser to introduce this annoying “show/hide status bar” behavior and then many other browser vendors started adopting it as well. Firefox was not exception.

But then, the Status-4-Evar extension fixed exactly that: it restored the status bar to the location where it belonged, and allowed Firefox users to browse happily with the status bar displayed at all times! No more status bar “flickering” on/off! :-)

Unfortunately, Firefox Quantum brought not only some cool stuff but some bad stuff as well, and namely, it broke all the existing (pre-Firefox-57) extensions! And so Status-4-Evar was gone as well.

I am using Mozilla Firefox (and before that, Mozilla Suite) for ages. I love the browser. I like that it’s developed by the Mozilla Foundation (and not Microsoft or Google or Apple — three giants that I don’t like particularly). I like that I can customize every little bit of my browsing experience in Firefox… or rather, could. Because, as I just mentioned, most of the old extensions will not work in Firefox Quantum (versions 57, 58 and later).

So I jumped on a quest to find the missing status bar!

A quick google search showed quite a few results but some of them were misleading and others turned out to be just some posts where people complained about the missing functionality.

I then dug deeper and found out that even if now Firefox extensions cannot customize the user interface of Firefox anymore, there is still a manual (and not so well documented) way of modifying bits of the interface by using a special CSS file that you can create locally on your computer: userChrome.css.

The userChrome.css file must be created inside the chrome folder in your Firefox profile (this is well documented in the following Firefox help page).

As an example, in Windows 10, the file is located here:
C:\Users\«your-Windows-profile»\AppData\Roaming\Mozilla\Firefox\Profiles\«your-Firefox-profile»\chrome\userChrome.css

After you create this file, add the following code to it:


/*
    Display the status bar in Firefox Quantum (Firefox 57+)
    permanently at the bottom of the browser window.
    Code below works best for the Light Firefox theme and is based on:
    https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
*/

#browser-bottombox {
    height: 20px;
    border-top: solid 1px #CCC;
}

.browserContainer>statuspanel {
    left: 4px !important;
    bottom: 0;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label {
    margin-left: 0 !important;
    border: none !important;
    padding: 0 !important;
}

window[inFullscreen="true"] #browser-bottombox {
    display:none !important;
}

window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label {
    display:none !important;
}

Save the file and restart Firefox. You should now see the status bar permanently displayed at the bottom of the window! :-)

I took the idea from the following page: firefox-gui-chrome-css and made some slight modifications to it. It works best with the Light theme for Firefox Quantum.

If you are using the Dark Theme in Firefox then better if you use the next block of code as it was adapted specifically for the dark Firefox look:


/*
    Display the status bar in Firefox Quantum (Firefox 57+)
    permanently at the bottom of the browser window.
    Code below works best for the Dark Firefox theme and is based on:
    https://github.com/MatMoul/firefox-gui-chrome-css/blob/master/chrome/userChrome.css
*/

#browser-bottombox {
    height: 20px;
    border-top: solid 1px #505050;
}

.browserContainer>statuspanel {
    left: 4px !important;
    bottom: 0;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

.browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label {
    margin-left: 0 !important;
    border: none !important;
    padding: 0 !important;
	color: #EEE !important;
    background: #333 !important;
}

window[inFullscreen="true"] #browser-bottombox {
   display:none !important;
}

window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label {
    display:none !important;
}

Note: If you are using more than one Firefox profile, you’ll need to add the modification to the userChrome.css file separately to every chrome folder in every profile.

I have tested this “hack” on two different Windows 10 computers with the latest Firefox 58 and it works brilliantly, at least for now. And I hope it will work for some time (unless the Mozilla team alters further the browser’s core code, let’s hope not).

If you’re the lazy type, feel free to download directly my modified userChrome.css files:
http://www.optimiced.com/wp-uploads/2018/02/userChromeLight.css
http://www.optimiced.com/wp-uploads/2018/02/userChromeDark.css
— only remember (after the download) to rename the file back from userChromeLight.css or userChromeDark.css to userChrome.css. I added “Light” and “Dark” in the file name only to differentiate between the two versions.

Finally, if you’re a Firefox power user and already have a userChrome.css file with some customizations in it — in that case just add the bit of code and save it. (Do not replace your original file with the downloaded one as it’ll remove your current customizations.)

Hope everything is clear but if you have a question, feel free to post a comment below or to ping me on Twitter. :-)


[ optimiced.com is the virtual home of Web & graphic designer Michel Bozgounov | powered by WP & hosted by DreamHost | also available in български ]

0.548 / 28 / 22.75