How to share Rails i18n messages with React through webpack

Very specific title hu? This time I’m here for sharing a solution for a specific problem I encountered a couple of days ago.

There’s this existing Rails monolithic application. Team and customer decided that time had come for this app to be decoupled in two components: Rails would do its usual work as an administration and API backend, while React would be used for the frontend component. Everything related to the frontend would then be rewritten, keeping the same behaviour and visual design. But there are a lot of translations related to the user experience and that have now to be included in the javascript bundle, while they were before used by the server.

To do so, I was aiming to write a webpack plugin that could give access to the Rails yml translations. Then I discovered the Virtual Module Plugin: During webpack compilation this plugin injects a fake file containing the given text.

Working on it led me to an extension that flattens and joins the various translations, providing them to javascript source files without duplicating data: a Rails Translations Plugin. In our case we didn’t even want to share ALL translations between Rails and React, but just a frontend.yml file (that stores messages related to the user experience), so the resulting webpack.config.js is:

// app/frontend/webpack.config.js

const clientApp = path.resolve(__dirname, 'app');
const webpackConfig = {
  entry: [path.join(clientApp, 'index.js')],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new RailsTranslationsPlugin({
      root       : clientApp,
      localesPath: path.resolve(__dirname, '../backend/config/locales'),
      pattern    : '**/frontend.yml'
    })
  ],
  module: {
    loaders: [
      {
        include : clientApp,
        test    : /\.(js|jsx|es6)$/,
        loader  : 'babel-loader'
      },
      {
        include : clientApp,
        test    : /\.json$/,
        loader  : 'json-loader'
      }
    ]
  }
};

And this allowed us to use them in ReactIntl:

// app/context.jsx
// ...
import { addLocaleData } from 'react-intl';
import translations from 'translations.json';

for (let locale of Object.keys(translations)) {
  addLocaleData(require(`react-intl/locale-data/${locale}`));
}

const locale   = navigator.language || 'en';
const messages = translations[locale];

return (
  <IntlProvider locale={locale} key={locale} messages={messages}>
    <App />
  </IntlProvider>
)

The only downside is that React Intl is not able, obviously, to work with Rails localization formats, and in fact we needed to iterate over the various locales and require its additional data needed for localization (look at the addLocaleData method in the above snippet). I’m now thinking of improving this plugin adding builtin methods that work like Rails’s I18n.t and I18n.l.

Find if a list is circular with memory constraint

Usually developers when thinking about a solution put their focus on the complexity of the algorithm (O(n), O(n^2) …) rather than the memory consumption, so lets see an example where the constraint is the memory S.
I would like to share the solution to an interesting exercise that I was asked to solve during a technical interview.

Continue reading “Find if a list is circular with memory constraint”

There is trouble brewing, or: Openssl issues on Ruby with Homebrew

This post is to describe an issue I’ve run into using < 2.3 versions of Ruby on OSX with rvm and brew.

Don’t even get me started on working with older versions of Ruby — we have some maintenance projects running in ruby-1.8.3! Even modern Rubies may give you a hard time, however, and this is one of the times. Actually, I am writing this post as a reminder for me because I ran into the same problem twice now, and what is worse, the second time it took me nearly the same amount of fruitless googling to solve it as it took the first. And the solution was the same! So, let us proceed with order.

Continue reading “There is trouble brewing, or: Openssl issues on Ruby with Homebrew”

More space, more productivity, more fun

Whoever uses a laptop finds out that there are situations where they want more available space on their desktop. For this reason, working with an external monitor can make you much more productive. When you are at home or at your office, you probably have a secondary display for your laptop but not when you are outside.

As many developers, I have a 13 inches MacBook and sometimes I need to have extra space to better handle multi-tasking and to increase my productivity. Now, there is a solution for those who want to have the advantages of an extra monitor even outside the office: DuetDisplay.

Duet is the first application that allows you to use your iPad as an extra monitor for your Mac, using a lightning cable. Unlike the alternative applications, it has zero lag because the iPad is connected via cable instead of WiFi. It can deliver a retina display up to 60 frames per second.

Installing Duet Display is quite easy. Just download the app from the AppStore on your iPad and on your Mac and then restart the computer.

The app’s creator guarantees that it “increases of productivity by up to 48%”. As a matter of fact, Duet Display is great to keep an eye on Slack while writing code on the code on the main monitor.

However, if you think that one iPad is not enough, you can also connect a second one and with the help of these clips, called Mountie Clips, you can turn your Mac into a triple-display laptop.

Anyway, if you think that your iPad displayis too small to work as secondary monitor for your laptop, there is yet another (much expensive) solution: the brand new Razer Project Valerie. Presented at CES 2017 in Las Vegas, the world’s first automated triple 4K display laptop, allows to triple your normal productivity (and your gaming skills) without any compromise.

In fact, you can take “advantage of each display independently, running multiple applications simultaneously allowing for multi-tasking like never before”. The release date is not yet known as well as we expect the price to be as stunning as its features.

More on Duet: www.duetdisplay.com
More on Razer: www.razerzone.com/project-valerie

asdf the “easy to write and hard to read” version manager

As a Rubyist one of the first thing you end up doing is to manage many different Ruby versions on the same machine. As a matter of fact, one of the first steps in setting up a new workstation is to install some kind of version manager like RVM or rbenv.

Unfortunately it doesn’t end up simply like this…

Continue reading “asdf the “easy to write and hard to read” version manager”

Donkey Kong and the secrets of the brain

I don’t know about you, but for me there are few topics as complex and as fascinating as the human brain. How it evolved in us as a species, how it develops differently in each individual. How this small, low-power biological device can store memories for years, carry out complex tasks, explore large decision trees in a matter of seconds or compose the 9th Symphony in D Minor. How it enables the existence of the individually unique bundle of thoughts, feelings and self-awareness that is consciousness.

Continue reading “Donkey Kong and the secrets of the brain”

How requirements shaped my code, AKA Rails 5 and ActiveRecord before_destroy callbacks

I recently started a new project with Rails 5, and at some point I found out the code was not behaving as expected.
The initial scenario was quite simple, Admins can have many Phones, as this code suggests:

Continue reading “How requirements shaped my code, AKA Rails 5 and ActiveRecord before_destroy callbacks”