Tanker is a PaaS that allow developers to easily protect any kind of data with end-to-end encryption through a SDK.

Here we are going to implement a simple Vue.js app containing a text input. The contents of this inout will be encrypted and decrypted using Tanker.

This post is basically the tanker encrypt-decrypt tutorial using Vue.js instead of React.

  • You have basic knowledge of JavaScript
  • You have basic knowledge of Vue.js

Create a Vue.js project

This shouldn’t be too hard. I’ll be doing it with vue-cli.

yarn global add @vue/cli
vue create tanker-encrypt-decrypt
cd tanker-encrypt-decrypt
yarn serve

Now head to src/App.vue and replace the…

This post is exactly about what the title said: deploying a Laravel application to Heroku with GitLab CI/CD.

As I needed to do it I unfortunately didn’t manage to find any tutorial or post about this precise case. I had thus to gather information here and there and thought it could be a good thing to write about it so it could help anyone who would find itself in this (not so crazy-specific I guess) case.


  • You have a Heroku account. I won’t go through the process of creating one here.
  • You have a Gitlab account. Same as above.


Edit April, 21st: Add time complexity benchmark

We very often need to store key value pairs for various reasons. I found that most of the time people (including myself) use the Object data structure to achieve this though ES6 provides a Map data structure which really looks like what we should be using.

Let’s try to see what are the differences between these two shall we ?

Disclosure: I’ll call key both Map key (which is correct) and Object property as we’re talking about storing key value pairs in this post.


There are no big differences when using one or…

And nothing else (not an Array, Set, etc.)

I’m currently working on a project where we store certain values as either a string or an object. Depending on the type of the value, we will handle it in a different way. Even though here we expect to only work with a string or an object, I want to write a robust and general function that will determine explicitly if a value is a plain JavaScript object. I want to handle edge cases where other data structures based on JavaScript objects (such as arrays, sets, null, etc) will return false since they are not just a plain object.


If you followed the first part of this tutorial you should now have:

  • The basic library with a DummyButton.vue component
  • The app that imports and uses this component

As said at the end of the first part I had components relying on a Vuex store. I thus had several questions:

  • How to export a Vuex store ?
  • What would happened if my library had variable named A and the app also had one ?

The library

One thing you need to know: a Vue.js app can only have one Vuex store instance and this store will sit within the app. …

I’ve been working on a Vue.js project for months now. At the beginning it was supposed to be a project that would only sit in one meta-project but we’re now thinking of releasing it in other platforms.

In order to not copy paste code and having to maintain multiple copies of it, I thought it would be a great thing to have this project as a package. There are obviously many pros: easy to install, everyone would benefit from the updates, a bug fixed once will be fixed for everyone, etc.

There was one con thought: I never did a…

You might think that this could easily be done by using the in operator.

const user = {
name: 'Olivier',
'name' in user // true

The problem with the in operator is that it checks if the property is in the specified object or its prototype chain. This means:

const user = {
name: 'Olivier',
'name' in user // true
'age' in user // false
'constructor' in user // true

Because constructor is actually a property of the object prototype.

Thankfully there is a hasOwnProperty method which indicates if the object has the specified property as its own…

I’ve been working A LOT with javascript over the past few months and though there are lot of stuffs I don’t like about this language I have to admit some really nice stuffs have been introduced recently.

Destructuring syntax

This can be a little bit disturbing at the beginning but when you’re dealing with objects having a lot of properties it is actually really useful.

const name = myObject.name 

can be written:

const { name } = myObject

This is not really useful in this case and not straightforward at all I agree but check this:

const { firstname, lastname, age }…

Everything is explained here: https://xdebug.org/docs/install but this page is easier to follow.

Looks like brew install php70-xdebug is not working anymore. So here is what you need to do:

  • Head somewhere you want to keep all your php modules like /usr/local/etc/php/modules
  • Clone the repository: git clone git://github.com/xdebug/xdebug.git
  • Head to the repository: cd xdebug
  • Phpize it (I don’t know what this is doing): phpize
  • Run the configuration step: ./configure -—enable-xdebug
  • And finally make && make install

You should now have the package ready to be used. Mine was here: /usr/local/etc/php/modules/xdebug/modules/xdebug.so

If you encounter some errors during the steps above, don’t hesitate…

As a developer I’m always trying to automate repetitive tasks. Unfortunately this isn’t always possible. Take git for example, I’m most of the time doing the same things:

  • Add files
  • Commit or amend an existing commit
  • Push all of it to the remote branch
  • Wait for CI to pass
  • Wait for fellow colleagues to review and comment my PR/MR if needed

and thus I’m always typing the same git commands.

At the beginning of my career I discovered git aliases. This was a revolution to me. Instead of typing long commands and trying to remember the right options to do…

Olivier Picault

Software engineer @ Alan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store