Open source contribution on DevIT site

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:

Figure 1. Speakers' contacts visible only on hover
Figure 1. Speakers’ contacts visible only on hover

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 :

Figure 2. Inspect speaker's element
Figure 2. Inspect speaker’s element

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

Figure 3. Searching for "speaker-contacts" occurences
Figure 3. Searching for “speaker-contacts” occurences

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:

Figure 4. Things didn't go as expected
Figure 4. Things didn’t go as expected

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:

Figure 5. Speakers' contacts always visible
Figure 5. Speakers’ contacts always visible

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!

Beautifying Javascript’s default alerts with sweetalert

Ok, I was in the middle of my upocoming (scheduled for the 17th of March) AngularJS Form Validation example for the Web Code Geeks (WCG)  community, using Twitter Bootstrap and AngularJS and I was quite excited about that, but still my sample app didn’t look so beautiful.

What resulted to this condition, was the fact of the deprecated JavaScript’s default alert functions, so after a quick search, I found out that sweetalert matched my needs.

SweetAlert is not a jQuery plugin, but a combination of JS, CSS and some images, which together, produce a very catchy product that every front-end developer would love making use of.

What to include in your project in order to use it

All you have to do, in order to use these fancy alerts in your projects, in to download the package from the fore-mentioned link (or just the lib folder) and reference the JavaScript and CSS files manually:


How to use it

A simple alert:

swal("Hello World!");

An error message – the arguments’ order is: title, text, message type:

swal("Oops...", "Something went wrong!", "error");

Using sweetalert in a real project

A good starting point would be this repo of mine, where I’m implementing an AngularJS form validation app, using Bootstrap and sweetalert.

 You will be able to read about the project’s analysis (from Angular’s perspective) in a week, as this is an example that will be published in WCG, as I fore-mentioned.

For the moment, here are the product’s screenshots from the successful and erroneous app’s alerts:

Success alert
Error alert