Open source contribution on DevIT site

28 March 2016 · 7 minutes to read

1. Preface

Well, it’s been a while since my last blog post and honestly, many things changed.

1.1 Transferred blog to WP

First of all, according to the blog: it has been transferred from blogspot to WordPress and ooh, although I have spent a lot of time trying to configure it properly, it still seems that there is no “custom” future for it. So what? Migrating again to No, no, no. If it has to be more customization effort on the ground, I would definitely go for Jekyll (and yes, DevIT site is made of Jekyll :-) ), as I at least see the following advantages:

  • Less effort required for customizing it.
  • The effort spent for customizing it indeed worths it, as it's nearer to my personal interests (open-source, front-end tools) and involves a bit of programming.

1.2 Relocated to the Netherlands

The main reason that Ι was inactive for a while is my relocation to the Netherlands. For now, I won’t provide any feedback on this, as I am waiting the end of year, where I will post my annual review and I will surely have a more genuine opinion for both sides.

2. DevIT Conference 2016 contribution

Having had the opportunity for a “long weekend” (yesterday Easter was celebrated here, so, today is an official day-off under the name of “Easter Monday”), I decided to make a small contribution to open-source: this time, for the DevIT Conference 2016 site.

2.1 The major issue

Let’s make a visual comparison first, to understand the problem/issue before providing its lectical description. First, here is an animated screenshot of a last year’s speaker, Mathias Bynens, a professional I admire a lot and met in person in last year’s event, on occasion of the fact that we both contributed on the GetCountries project:

[caption id=”attachment_143” align=”aligncenter” width=”286”]Figure 1. Speakers' contacts visible only on hover Figure 1. Speakers’ contacts visible only on hover[/caption]

That is, it would be far way better to have the speaker’s social contacts visible by default, without having to hover over the specific speaker’s panel to see them.

2.2 The procedure

So, how to do it with not so much experience on css? Two words:

  1. Firebug
  2. Astrogrep

Ok, there is a third word, too, that matches your favourite editor, but the above two make the difference for a small change like the one explained today.

Inspecting a speaker’s panel revealed something good :

[caption id=”attachment_144” align=”aligncenter” width=”638”]Figure 2. Inspect speaker's element Figure 2. Inspect speaker’s element[/caption]

The speaker-contacts class. Next step? Performed a proper search with Astrogrep:

[caption id=”attachment_145” align=”aligncenter” width=”800”]Figure 3. Searching for "speaker-contacts" occurences Figure 3. Searching for “speaker-contacts” occurences[/caption]

The occurence on responsive.css file seemed to be ok, but also revealed something more: the speaker-active class, which by its turn made me think of a possible jQuery manipulation for displaying/hiding the speaker’s contacts, on hover.

So, as a first step, the removal for all the occurences of the speaker-active class on both style.css and responsive.css files, was required and to be more specific, here is the offensive line, that made the transition to happen: .speaker-info { margin-bottom: 50px; margin-top: -50px; }

But still, the fore-mentioned changes weren’t enough, as they ended up hiding the speakers’ contacts panel:

[caption id=”attachment_146” align=”aligncenter” width=”1080”]Figure 4. Things didn't go as expected Figure 4. Things didn’t go as expected[/caption]

Why? Because the speaker-contacts class (style.css) defined the position property with a value of absolute, which means, that the specified element (speaker’s contacts panel) was positioned relative to its first positioned (not static) ancestor element (speaker’s info panel), which lead to an overlap between those two, after the previous change.

Nonetheless, it worked perfectly (with position: absolute) before my change and the reason is that , prior to this, there was a transition of the speaker’s contacts panel to the bottom of its parent (speaker’s info panel), on mouse hover, That is, using the absolute value for the position property, just placed the contacts panel where it should, by taking into account the existence (or not) of the speaker-active class, too.

So, just changing the value to position: !absolute provided a working solution:

[caption id=”attachment_147” align=”aligncenter” width=”255”]Figure 5. Speakers' contacts always visible Figure 5. Speakers’ contacts always visible[/caption]

Truth is, that using the negative operator is not a good solution, but on this case, I believe it was better, in comparison to setting the property’s value to either static or initial, as for our case, both of them do not make so much sense.

2.3 Cleaning up the neighborhood

Ok, problem solved, but didn’t we talk about a guess (jQuery manipulation of the speakers’ contacts panel)? Yes, walking again around with Firebug’s inspector, one might see that on hover of the speaker’s div, the respective script is:


So, again, same procedure with Astrogrep and removing the entire function:

// Speakers
$(function () {
  var speaker = $(".speaker");
  speaker.hover(function () {

3. Conclusions

More a come-back post, rather than a super-solution. An easy task for the majority of front-end and full-stack devs, in general, but a good step for me to their world, as, except from the common tools that I have already had some exposure on (Grunt, npm, bower), this one also included bundler.

My commit can be found here and I will be more than happy to receive any feedback.


Have fun!