Change a Font Awesome icon on hover (using content) + Sopler news!

Hi everyone! The past few days, we made some major updates on Sopler that we started designing a long time ago.

It is now possible to set a due date or edit your items using a brand new options menu. Also, when you enter a YouTube link, a (auto-scalable) player will appear on the list! 🙂

Nonetheless, this post concerns changing a Font Awesome icon to another Font Awesome icon when the first one is on hover.

Firstly, I came across this post and a few (unrelated but helpful) answers on Stack Overflow that used the content property. Then, I thought that this might work pretty well and it did.

For example,

  <div class="divclass">
    <i class="fa fa-circle-o"></i>
  </div>

using this CSS:

.divclass{
  font-size:5em;
  color:grey;
  cursor:pointer;
}

.divclass:hover .fa-circle-o:before{
  content:"\f05d";
  color:green;
  opacity:0.4;
}

OK, the div element will be a full-width rectangle (use your Developer Toolbar to check what’s going on), but you can modify it later. Anyway, the result is: http://jsbin.com/noqiwi/

It might be trivial but it’s also a lot easier than other implementations I’ve seen so far.

A Creative Commons music video made out of other CC videos

Hello! Let’s go straight to the point. Here is the video:

…and here are the videos that were used having the Creative Commons Attribution licence: http://wonkydollandtheecho.com/thanks.html. They are downloadable via Vimeo, of course.

Videos available from NASA and the ALMA observatory were also used.

The video (not audio) is under the Creative Commons BY-NC-SA licence, which I think is quite reasonable since every scene used from the source videos (ok, almost every scene) has lyrics/graphics embedded on it.

I hope you like it! I didn’t have a lot of time to make this video but I like the result. The tools I used are not open source unfortunately, because the learning curve for these tools is quite steap. I will definitely try them in the future. Actually, I really haven’t come across any alternative to Adobe After Effects. You might say Blender…but is it really an alternative? Any thoughts?

PS. More news soon for the Sopler project (a web application for making to-do lists) and other things I’ve been working on lately (like MQTT-SN).

2013 in review powered by WordPress

The WordPress.com stats helper monkeys prepared a cute annual report for this blog for 2013 🙂 For 2014 I’ve bought tickets for FOSDEM 2014 to represent Sopler and share what cool things can happen with it.

Right now, I’m taking a look at Mozilla’s version of the l10n.js library in order to localise Sopler (at least on FirefoxOS).

Well, that’s it! Have a great 2014! By the way, for this year, the 3-years-in-a-row champion is again “My Fedora 15 tweaks for an SSD” (ok, it accumulates all previous years but nevertheless it still gets views). I guess they’ve become even more popular! (both Fedora and SSDs).

PS. A weird thing to say but, if anybody works for a new wave/post-punk/indie rock record label, comment or PM me! I got good news for you from Wonky Doll and the Echo.

Click here to see the complete report.

Making a Tabzilla clone using Bootstrap

Hi, as you might have noticed Sopler has a navigation menu very similar to that of Mozilla’s Tabzilla…but it’s not 🙂

I think Tabzilla is a great tool but while making Sopler’s front-end with Bootstrap I faced a problem integrating it. I had to use a string in order to place HTML inside my menu. That’ss very restrictive. But, I found a similarity between a component of Bootstrap and Tabzilla!

I have no idea if someone else has found that out too, but it’s  the same effect with Bootstrap’s accordion. It expands & retracts.

In this post I will use the template of the navbar-fixed-top example from Bootstrap 3. Go get it here (Download source). It’s in the examples folder. Tabzilla is not fixed so I think we have an improvement here. Anyway, someone might find it too much, so, to implement my example on the navbar-static-top, you won’t need the javascript code at the end of this post. Here is a demo for navbar-static-top (not the navbar-fixed-top I mentioned before): http://jsbin.com/EkAweqA/1/ (press the Menu button)

The whole trick is to place the “accordion-body” div above the “accordion-heading” and then write a few lines of Javascript to change the navbar’s position from fixed to relative….and that’s it!

Go to the navbar-fixed-top example, open index.html and replace everything between:


<!-- Fixed navbar -->

and


<div class="container">

<!-- Main component for a primary marketing message or call to action -->

(this is NOT the first div class=”container”  you’ll find, it’s the one in line 69)

<!--- This will not show up until you press the Menu button --->
<div id="login_box" class="login-box">
   <div class="accordion" id="accordion2">
      <div class="accordion-group">
         <div id="collapsemenu" class="accordion-body collapse">
            <div class="accordion-inner">
		    <div class="row inner_box">
			<div class="col-md-12">
			    <h2>Put any HTML goodies you want here!</h2>
			</div>
		    </div>
	    </div>
         </div>
      </div>
   </div>
</div>

     <!-- Fixed navbar (To make it static simply change to navbar-static-top)-->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
         <ul  class="nav navbar-nav list-inline" style="float:right; margin-right: 5em; white-space: nowrap;">
   	<div class="accordion-heading">
        </div>
	 <button type="button" id="menu_button" class="btn btn-primary navbar-btn" data-toggle="collapse" data-parent="#accordion2" href="#collapsemenu">Menu</button>
</ul>
	<a  class="navbar-brand" href="#">Brand name</a>
      </div>

    </div>

Now, we need to create two more classes at the navbar-fixed-top.css (it’s next to index.html inside the navbar-fixed-top folder) :

.login-box{
white-space:nowrap;
top:0;
width:100%;
background:#fff;
overflow: hidden;

}

.inner_box{
margin:0 auto; max-width:57em; text-align:center;
}

Of course you can style it the way you want! And finally let’s go to the footer of the page (under the jquery.js call) and put this script (not useful for the navbar-static-example):

<script type="text/javascript">
$(document).ready(function(){
var isopen="";
$('#menu_button').click(function(){
if (!open){
$('.navbar-fixed-top').css('position','relative');
$('html,body').animate({ scrollTop: 0 }, 'normal');
}else{
$('.navbar-fixed-top').css('position','fixed');
}
isopen=!isopen;
});
});
</script>

Let’s explain the script! We use the isopen variable (line 3) which is set to false by default. It’s working like a switch. If the menu is not open and we click the Menu button then the page scrolls to the top and the position of the bar is set to relative. If we click the button again then the navbar’s position is se to fixed. We don’t need to scroll because when the menu is open the bar won’t move from its place anyway (that’s why we used relative).

If all goes well, when you click the Menu button it should look like that:

Introducing Sopler, a new open web application!

Here are some exciting news: The last two of months I’ve been part of a promising project. We made a web application that uses open standards (and it’s open source). It’s called Sopler and we are the Sopler project. I worked on the UI/UX design part  (meaning, HTML5, CSS3, JQuery etc) and oh boy…I’ve learned a lot of new stuff (like Bootstrap 3, FirefoxOS etc) and there are lot’s of things to post on this blog in the near future.

What can you do with Sopler? Make a list, add some items and share the link with your friends.They can add or check some items, make comments etc…

Sopler is still in Beta but you can check our code on Github. Enjoy our new video (with english & greek subtitles available):

What can’t you see in the video? Sopler can “remember” all previous lists of an authorized user (who signed in using a social account), plus, his privileges over any item are greater than those of a non-authorized user.

That’s because a social account profile makes a user unique and in this way it’s easy to map a user to his list.

Yes, Sopler is on many social networks too: Facebook, Twitter & Google+

So, see you soon with more news 🙂

YouTube HTML5 Switch v0.1.7 & News

Hello!

Long time no see! I’ve been busy outside the blog-sphere and I’ve got some news to share. First of all, I upgraded my Firefox Add-on to version 0.1.7. So here is the link:

https://addons.mozilla.org/en-US/firefox/addon/youtube-html5-switch/

All in all, the important addition is that you can now use the hotkey Control+Y instead of pushing the button on the toolbar. Plus, I think it now has no other issues for most new versions of Firefox. I need to point out that I get most of the help from the SDK’s documentation which is great, but, to anyone interested, don’t hesitate to contribute to its content! Restartless add-ons rule!

You may use it and see if it works on YouTube (yeah it works, at least for Firefox 21.0 w/ Fedora Linux) using this video:

Yes! It’s the first video of the band I play with, directed by Kostas Gounaris. Cool huh? 🙂

I hope you’ll like it as we put a lot of effort to complete it and guess what? There’s also going to be a short film based on the song. I’ll let you know!

Happy new year & YouTube HTML5 Switch v0.1.3

Happy new year everybody!!!

Here I am, once more, to announce the new version of my recent small project YouTube HTML5 Switch. I made quite a few additions to the previous version (for which I already made a post) and changes to it and it’s on its way to become a fully reviewed add-on for Firefox 🙂

So what the 0.1.3 version does and has right now is:

  • A navigation bar button using the toolbarbutton-jplib (and its depdencies) by erikvold
  • a new 16×16 icon for better cross-platform compatibility (I know, it used to be prettier but I will make it again soon)
  • It works only when “youtube.com/watch” has been opened
  • It doesn’t work if &html5=1 is already in the URL
  • A clickable widget icon at the add-on bar.

What really changed is that now the navigation bar button is movable and its position is maintained if you open a new window etc. More fixes soon 🙂

Once again, the code is on my github repo. Of course, for any major change I will keep you posted 🙂

For those and only those who already use YouTube HTML5 Switch and will upgrade to v0.1.3: Don’t worry if the old icon remains on the browser window. Just restart Firefox and everything will work fine!

————————- Ahem…ahem… Your attention please 🙂  ————————————–

Update: The campaign ended successfully 🙂

Another project I want to talk about is one that’s on Indiegogo, a crowdfunging website! It’s for my band, Wonky Doll and the Echo. If you dig cinema and like our music please, have a look on our Double project: a music video & a short movie. We will collaborate with a director, Costas Gounaris, for our first music video! Our page is here: http://igg.me/p/297701/ Every cent counts and everyone wins gifts too!

By the way…this is the song of the music video:

YouTube HTML5 Switch (and other news)

Hello! Long time no see!

It’s been a busy period and I have lots of news to share. First of all, I decided to have a look on the Mozilla Add-on SDK . It has a very simple API to create Add-ons for Firefox.

Anyway, I tried to come up with an idea of what would be my first Add-on. Hmmm…An Add-on that can make my web experience less annoying. Considering that I spend half of my time on YouTube to listen to songs (mostly), view videos etc, as a Linux user, I get really annoyed when the Flash plug-in crashes and I have to restart Firefox.  You can always visit youtube.com/html5 to change that but what if you delete your cookies? It’s a boring procedure.

youtube_html5_switch_logo
YouTube HTML5 Switch logo

So, what I thought was to make an Add-on that would simply add the “html5=1” parameter on the URL. And I did it…well, kind of, it’s now an experimental Add-on for Firefox. I need to add some more features for it to be considered as a proper Add-on. It’s called “YouTube HTML5 Switch” and here it is at the Mozilla Add-ons website, and here is the source code on Github.

I currently develop the Add-on at the Add-on Builder (that means online). I will eventually download the SDK and try it on Fedora 🙂 It’s not the smartest Add-on in the world, but I think it’s a good start for a newbie. By the way I need to say that the SDK’s documentation is not very helpful and I needed to google a lot to write down a few lines of code. Anyway, in every “major” release I will be posting here any changes etc. You can also read the README.md on Github.

What’s more? Wonky Doll and the Echo (the band where I play) are supporting I Like Trains here in Athens on December 15, 2012. You can check our Bandcamp page and listen to our songs. Now, if you have installed the Add-on you can test it with these video…if you go on YouTube of course 🙂

Some videos like this for instance don’t have an HTML5 player so the plugin will not be of any use here.

Other videos though, do have have an HTML5 version and the plugin will work!

Review of Mozilla Balkans meeting @ Sofia

If you follow my identi.ca or twitter account, you might had noticed that Pierros , Freddy and myself wore our Mozilla hats and went to Sofia for the Mozilla Balkans meeting. An easy trip since Bulgaria is very close to Greece.

On overall : it was a great experience! How could be otherwise? I met new people (including Chris Hofmann, William Quiviger and others), got in touch again with cool people I’ve already met (in Ljubljana, Slovenia) and had the chance to discuss the hot topics that concern the Mozilla Balkans community.

I shouldn’t whine at all, but there was no wifi at the meeting area. But! We got through it using Fedora (actually the Network Manager internet/wifi sharing coolness) and one Ethernet port available on the room.

By the way, sticking post-it notes with what’s good, bad, giving a thank you and expressing ideas on the wall (each category was a part of the wall) was beyond cool, making it even more interesting than using our laptops.

What I suggested was to run a DemoParty[1] covering the Balkans area (Matjaž Horvat-approved suggestion 😉 ): each one of our communities (if possible of course) will run a DemoParty on its own, locally. I think this is a good chance to attract creative people as our goal is also to make the web better, not only the browser (we wouldn’t want the best browser for a web that sucks anyway). What is needed is the participation of the members of each community, an announcement on each Mozilla community website with the rules etc, judges, support from others in Mozilla that have already run a DemoParty and if possible a place (hackerspace or whatever) to announce the winners etc.

I also suggested aborting the  Skype calls. It’s simple, imagine all the people in the room in Sofia participating via Skype. Suicide is next! I mentioned four other reasons as well. IRC meetings are much more productive since we can log our conversation and plan our discussion beforehand.

Furthermore, Athens was proposed to be the next city to run the next Mozilla Balkans meeting (we compete Belgrade!)

Not to forget the newly created ReMo project! hooray!!! [2]

What’s more? The Greek Mozilla community website is under construction. We will mainly post our news there to let you know what’s going on. I need to mention our new mailing list as well! You can join us  here [3].

Anyway you can learn more (also see photos) for what happened in Sofia here at our aftermath page [4]. Once more a thank you to the organizers (yeah to Bogo too!).

<off-topic> This week has been very busy, since I am finishing my studies this semester. I am also looking for a postgraduate program in embedded systems/HCI/electronic automation (so far the universities of Athens, Leiden and Delft have what I want 🙂 ) . If you know something about that matter and want to share it with me, please do 🙂 </off-topic>

[1] http://mozillalabs.com/demoparty/

[2] https://wiki.mozilla.org/ReMo

[3] http://lists.mozilla.org/listinfo/community-greece

[4] http://wiki.mozilla.org/Balkans/Events:2011/Sofia/Aftermath

My Fedora 15 tweaks for an SSD

NOTE: Same things apply even on Fedora 17/18/19 🙂

====== In English / Αγγλικά ======

Hello! I am going to share how I tweaked my Linux system using Fedora 15!

I did a bit of searching and found some interesting proposals on how to do it. To be honest there isn’t one specific way of doing it. It depends on how much you love your data, how much you want your SSD to live and of course what’s your hardware (eg. my SSD supports TRIM, I have enabled the RAID option and I have 8 GBs of RAM). In short, what I will do is make the system use the TRIM command (which is essential) and put the temporary folders in RAM.

tip: if you have other OSs installed and change to RAID mode (with one ssd it’s like AHCI), they might not work (there are guides to avoid re-installation)…Linux will work though 🙂

One great source was this one [1].

First of all, we will use the ext4 filesytem (no swap partition for me). There is one thing to know! Writing on your SSD without reason or moving/writing data is harming its life expectancy. SSDs have endurance due to the MLC technology [2] (approximately 10.000 writes per memory block [3]) which is cheaper, but in the end we also want our SSD to live!

Now, apart from my SSD, I also have my old HDD plugged in my computer. It’s SATA so I didn’t have any other problems to set it up. During the installation process, I created my partitions manually. You know: create some free space and then create new partitions with the appropriate mount points. I used “/” ,obviously for a partition for the root directory, and also “/home” to place my data and program configuration on a different partition (and disc). To store “/home” folder, I used the HDD, just because I want to download stuff and save my media files there! Remember that it’s bad for your SSD writing again and again to it.

After you install Fedora 15, to check if your SSD supports the TRIM command (supposing your disc is  /dev/sda) :

hdparm -I /dev/sda | grep TRIM

(grep will search and find the lines where the word “TRIM” exists in the output of the command before the “|” symbol)

Now, you must edit the “/etc/fstab” file, it’s the filesystem table.You can create a copy of this file in case you feel it won’t work (but, hey, it will) or something else goes wrong:

cp /etc/fstab /etc/fstab.bakup

How did I edit it? “su -” , give your password and then “gedit /etc/fstab”. Now, visit the second page [4] of the guide at step 2! TRIM command support (if your drive supports it of course) ! You absolutely need to do this! Now that you opened “fstab” you need to add the “discard” parameter next to the defaults parameter for the root directory! As you will see at the link it’s something like that:

/dev/sda1 / ext4 defaults

That will change to something like that:

/dev/sda1 / ext4 discard,defaults

Now, it’s up to you if you want to add one other parameter! Tweaking might mean less reliability and data integrity but that’s why I moved my precious data on my HDD 😉 You can also add the “noatime” parameter (just like discard)  and, hey(!), Linus Torvalds also suggests it [5]

What’s next? Moving our temporary folders to RAM. I have 8 GBs of RAM and I am not afraid to “use” them! By “temporary folders” I mean “/tmp”, “/var/tmp” and “/var/log”. For that, you need to add three lines (each one for every folder) at the “/etc/fstab” file. It’s step 6 at the guide. One line (for /tmp) will look like this:

none /tmp tmpfs defaults 0 0

Don’t worry about “none” (it’s just a name) it helps the folders stand out so that we will find them easier later. Next thing you can do is to also move the Mozilla Firefox cache there (as proposed in the guide)!

To check if everything is working just run the command “df” and it will show you what are you partitions doing!

OK, how can we optimize our system even more? Disabling journaling of ext4 (making it unable to keep track of data, meaning unreliable). BUT! This is as far as I will tweak my SSD. Furethermore, we allready changed “noatime”. I have the life expectancy I need and also a high speed disk, having in mind that I want my data uncorrupted as much as possible.

[1] http://cptl.org/wp/index.php/2010/03/30/tuning-solid-state-drives-in-linux/

[2] http://en.wikipedia.org/wiki/Multi-level_cell

[3] http://www.laptopmag.com/advice/expert/are-ssds-worth-the-money.aspx?page=3

[4] http://cptl.org/wp/index.php/2010/03/30/tuning-solid-state-drives-in-linux/2/

[5] http://kerneltrap.org/node/14148

======= In Greek / Ελληνικά =======

Για να λειτουργήσετε τον SSD σας ώστε να “ζήσει” και να λειτουργεί στην μέγιστη απόδοση, δεν υπάρχει μόνο ένας τρόπος. Ανάλογα με το hardware του υπολογιστή σας (ο δικός μου υποστηρίζει την εντολή TRIM , έχω ενεργοποιήσει το RAID mode και έχω 8GB RAM),και το πόσο χρειάζεστε την ασφάλεια των δεδομένων σας πρέπει να επιλέξετε εσείς τί αλλαγές θα κάνετε. Αυτό που είναι σίγουρο πως πρέπει να κάνετε είναι να ενεργοποιήσετε τη λειτουργεία TRIM του λειτουργικού. Εγώ επέλεξα και να μεταφέρω τους φακέλους “/tmp”, “/var/tmp /” και “/var/log” στη RAM, όπως επίσης εφτιαξα ένα partition για το  “/home” στον HDD δίσκο που μου ξέμεινε από το προηγούμενό μου PC.

συμβουλή: αν έχετε εγκαταστήσει ήδη κάποιο άλλο λειτουργικό εκτός του Linux και αλλάξετε το IDE mode σε RAID mode θα έχετε πρόβλημα το οποίο λύνεται και χωρίς format. Απλά ψάξτε το λίγο.

Ένα καλό site που συμβουλεύτικα για όσα έκανα στο δίσκο είναι αυτό εδώ [1] (δείτε τα links πάνω)

Καταρχήν, χρησιμοποιό το ext4 filesystem. Χωρίς swap. Πρέπει να γνωρίζετε ότι όσο περισσότερο γράφουμε στον δίσκο τόσο πιο γρήγορα θα σταματήσει να λειτουργεί στο επιθυμητό επίπεδο. Τόσο πιο γρήγορα θα πρέπει να πάρουμε καινούριο.

Λοιπόν, έφτιαξα ένα partition με το φάκελο root (“/”) στον SSD μου και ένα με το φάκελο “/home” HDD επειδή κατεβάζω και δημιουργώ συνέχεια αρχεία σε αυτόν τον φάκελο!

Έχοντας εγκαταστήσει το Fedora 15, για να δούμε, άραγε ο SSD σας υποστηρίζει το TRIM; (υποθέτως πως είναι ο  /dev/sda) :

hdparm -I /dev/sda | grep TRIM

(το grep θα ψάξει και θα βρει που βρίσκεται στην έξοδο της εντολής πριν το σύμβολο “|” η λέξη “TRIM”)

Τώρα θα επεξεργαστούμε το αρχείο “/etc/fstab”, είναι ο πίνακας για τα filesystems. Μπορείτε να δημιουργήσετε ένα αντίγραφω, μην πάει κάτι στραβά:

cp /etc/fstab /etc/fstab.bakup

Πως να το επεξεργαστείτε τώρα; Με το “su -” , δίνοντας τον κωδικό του root (administrator) και έπειτα με “gedit /etc/fstab” θα σας το ανοίξει με τον επεξεργαστή κειμένου. Τώρα, πηγαίνετε στη 2η σελίδα [4] του οδηγού, στο βήμα 2 (είναι στα αγγλικά)! Αφορά την υποστήριξη του TRIM command (αν το υποστηρίζει ο δίσκος) ! Πρέπει να το κάνετε! Απλά πρέπει να πάτε στο αρχείο που μόλις ανοιξαμε και να προσθέσετε την παράμετρο “discard” στο partition που εγκαταστήσαμε το root directory (το “/” δηλαδή”)! Πρέπει από κάπως έτσιt:

/dev/sda1 / ext4 defaults

Να γίνει  κάπως έτσι:

/dev/sda1 / ext4 discard,defaults

Αν θέλετε να πειράξετε κάτι άλλο εξαρτάται από εσας, για μέγιστη απόδοση φτάνει και αυτό. Μπορείτε (με ρίσκο για τα δεδομένα σας να προσθέσετε και την παράμετρο “noatime“(εγώ την έβαλα καθώς τα δεδομένα που με ενδιαφέρουν βρίσκονται στον HDD μου) Πάντως το συστήνει και ο Linus Torvalds [5].

Επόμενο! Έχω  8 GB RAM και δεν φοβάμαι να τα χρησιμοποιήσω όποτε είπα να μεταφέρω τους προσωρινούς φακέλους μου εκεί. Συγκεκριμένα τους “/tmp”, “/var/tmp” and “/var/log”. Πάλι στο “/etc/fstab” πρέπει να προσθέσουμε μερικές γραμμες (το βήμα 6 στον οδηγό). Μία από τις γραμμές που πρέπει να προστειούν στο τέλος του αρχείου είναι πχ. έτσι (για τον φάκελο /tmp):

none /tmp tmpfs defaults 0 0

Το “none” είναι απλά ένα όνομα, θα βοηθήσει μετά για να ξεχωρίζει από τα άλλα.

Μπορούμε επίσης να μεταφέρουμε και την cache του Mozilla Firefox cache σε αυτό το partition (όπως λέει και ο οδηγός)!

Για να δείτε αν δουλεύουν όλα ρολόι εκτελέστε την εντολή “df” και θα σας δείξει τί κάνουν τα partitions σας!

OK, τώρα αν θέλετε και κάτι παραπάνω (με δικόσας ρίσκο πάντα) μπορείτε να απενεργοποιήσετε το journaling του ext4. Αλλά! Δεν πρόκειται να πω άλλα καθώς δεν έχω πειράξει άλλο το δίσκο μου. Επιπροσθέτως ήδη προσέθεσα τη παράμετρο “noatime”. Ήδη έχω μεγαλώσει το προσδόκιμο ζωής του δίσκου μου. Μήπως τους κρατάμε και για πολύ;