GUIPSS

Use Vue-i18n in Vuex store

Posted on: 2018-08-24
Categories: javascript - vue

Here is a good way to configure Vue-i18n so you can use it in your Vuex Store

First, create a file just to configure the internationnalization, we can name it i18n.js, at the root of our project.

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import moment from 'moment';

Vue.use(VueI18n);

// if you are using moment in your project, now is a good time
// to set its locale also
moment.locale(locale);

const i18n = new VueI18n({
  locale, // global variable holding the local value
  messages, // globale variable holding translations
});

export default i18n;

The in your main.js file :


import i18n from './i18n';

// ...

new Vue({
  i18n,
  el: `#app`,
  router,
  components: { App },
  template: ``,
  store,
});

And in your Vuex Store (I am using vue-toasted to display messages in a toaster) :

import axios from 'axios';
import Vue from 'vue';
import moment from 'moment';
import i18n from '../../i18n';

export default {
  state : {
    // ...
  },
  mutations : {
    // ...
  },
  actions : {
    doSomething ({ dispatch }, data) {
      return axios.post(`/api/something`, data)
      .then(res => {
        Vue.toasted.success(i18n.tc(`store.success_doing_something`));
      })
      .catch(() => {
        Vue.toasted.error(i18n.tc(`store.error_while_doing_something`));
        return Promise.reject();
      });
    },
  },
};


Simple and automatic HTTPS proxy with Greenlock, LetsEncrypt and node-http-proxy

Posted on: 2018-08-21
Categories: javascript - es6

Thanks to greenlock and node-http-proxy, creating a https proxy whith Let's Encrypt has never been easier. Basically, we just have to mix the two :

var Greenlock = require('greenlock');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});
var redir = require('redirect-https')();

// let's create ou greenlock server first

var greenlock = Greenlock.create({
  // check greenlock's doc for the entire code sample
});


require('http').createServer(greenlock.middleware(redir)).listen(80);

require('https').createServer(greenlock.tlsOptions, function (req, res) {
  // proxy request instead of serving content :
  return proxy.web(req, res, {
    target: 'https://another-server.com',
  });
}).listen(443);

😉


Docker : log multiple containers at once

Posted on: 2018-05-12

If you are working on a project and you chose to use a microservices architecture where every service run in a docker container, you might want to keep an eye on every container logs as you work on them. But attaching every container to a terminal can become a little messy as your number of microservices increases.

I wanted to create all my container detached (-d options of docker run) and have all the logs of all my containers in one terminal. So I made a little CLI tool that does just that :

npm install -g docklog

Then :

docklog -f my-container1 my-container2 ...

The -f option is the same than docker container log, it will "stream" the log to your console as they are being updated.


Vue.js : Pass all props to child components

Posted on: 2018-04-21

Passing all props from a component to a child component in Vue is generally considered not a good thing to do... but you might want to do it anyway because you know what you are doing 😉 I'll try to write a post on how to avoid such a pattern later, but here it is :

Let's say you are using a framework that provide you with a component named VMenu, and you want to wrap that component in your own component (MyMenu) and pass all the props :

export default {
  name : `MyMenu`,
  functional : true,
  render (createElement, context) {
    return createElement(`div`, {}, [
      createElement(`v-menu`, {
        props : {
          ...context.props,
          aPropYouWantToOverride : `value`,
        },
      }, [
        context.slots().default, //  also pass default slot to child
        createElement(`template`, { slot : `activator` }, context.slots().activator), // passing another named slot (named "activator")
      ]),
    ]);
  },
};

The important thing here is to create a functionnal component, because that will automatically take all the props given to our MyMenu component and put them in the context object.


📚 Book review : Domain-Driven Design Distilled

Posted on: 2018-03-25
Categories: books - devlife

★★★☆☆

I learned about very intersting concepts (ubiquitous language, event storming...) so i'd say this book is a good read. It is overly complicated and verbose for a book that is supposed to be "an accessible guide to the basics of DDD", though.

I ordered it because I though it would be cheaper and more to the point than «Domain-Driven Design: Tackling Complexity in the Heart of Software» (which is supposed to be the DDD bible), but that just made me want to order it to see if it's better (for $50, it better be ! 😂)


Page 1