Get rid of any react-transform-hmr remnant!

Get rid of any react-transform-hmr remnant!

1. Introduction

Sunday night, preparing another small javascript project and struggling with a few dependencies.

2. The Problem

Copy-pasting configurations some times goes wrong of course, so I ended up like below:


3. The Solution

3.1 react-hot-loader

Navigating to link the error stack returned, I found out I should better give a try to the descendant of react-transform-hmr: react-hot-loader

3.2 Minimal configuration in .babelrc

If you just check the configuration in react-hot-boilerplate, you kinda understand the big of a change that we went through, you only have to define one line in your .babelrc file:

  "presets": ["es2015", "react", "stage-2"]

3.3 Update package.json

In addition, given the situation above, ensure you install the respective dependency:

npm install --save-dev babel-preset-stage-2



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!