DEV Community: Julien Calixte

Just in time documentation is the right documentation

Julien Calixte — Mon, 29 May 2023 06:10:00 +0000

Falling over the same trap again and again

Many times a problem occurs where new developers fall over the same trap again and again despite the fact that the solution has been well documented. How can it be their fault? They didn't even know the documentation existed!

The eternal question of "do we write documentation for our project?"... But if no one read it when it needs to, the documentation becomes waste.

Just in time

Just in time (jit) is a lean concept: the goal for a team is to produce the right amount of value when the client needs it. No less no more.

So I created a VS Code extension doing exactly that: doc-jit. It provides the right amount of knowledge the exact moment the developper needs it: just in time documentation. 🤎

How does it work?

You set glob patterns that is affiliated with a documentation file and doc-jit will propose you when your active file matches at least one of them.

// .doc-jitrc.json
{
  "patterns": {
    "**/*.test.ts, **/*.test.tsx": [{
      "label": "Jest documentation",
      "uri": "https://jestjs.io/docs/getting-started"
    }, {
      "label": "Vitest documentation",
      "uri": "https://vitest.dev/guide/"
    }],
    "**/*.test.tsx": [{
      "label": "React Native testing library documentation",
      "uri": "https://callstack.github.io/react-native-testing-library/docs/getting-started"
    }]
  }
}

In real life, it looks like this:

It's that simple and you can start with ease. For example, just your dependencies first, it's surprisingly powerful. Then add your own documentation, standards, tutorial, videos, etc. One problem solving at a time. Just in time. 😊

Developers, make your environment loopy 🔁

Julien Calixte — Sun, 13 Mar 2022 18:37:17 +0000

When we work, we want feedback: do we do the expected job? Does it fail? Where does it fail? Therefore, we want to receive feedback loops from our environment that gives us useful information about how well we're doing. This is what loopy means.

Hi! My name is Julien and I'm a tech leader at BAM where we design and develop mobile apps. A part of my job is to provide a healthy environment for my fellow developers to work at their best, improve quicker and then become tech leaders themselves.

In a dynamic system we want to adapt from visible inputs to concrete actions. And to do that, we need standards.

It starts with standards

Standards are established rules in the team. They are our best guess about what a good job is. Writing and comparing with real life allow us to distinguish what is normal from what is not.

Some tips when writing down a standard, make sure you have:

why it's important to write it down,
what are its key points,
what are the common mistakes we can avoid in the first place,
and what are the concrete examples to better understand it.

With these key points in place, we'll be able to compare with the real world and adapt. In a nutshell, to be loopy.

Loopy code

Once we agree as a team to use a set of standards, we want our tools to know them. Take linters in your code for instance. Linters are scripts that find and sometimes can even fix problems automatically. They are great to provide warnings when a developer diverges from the expected code. It saves time on training, on reviewing and on debugging.

The more we use a tool, the more reliant we want it to be. If in the previous paragraph you thought “Well, in my project linters are a pain in the butt, I hate how they force me to do additional work!”; this is a clear hint you are working for your tools and not the other way around. We don't want this. We want computers to execute repetitive tasks and humans to solve problems. So gather your team and update your linter rules so nobody complains. 🤔

Loopy tests

Talking about tests. If you want to rush, don't write tests. If you want to go fast and go far, write tests.

Mental loads are real and a heavy burden. When we start automating tests of some of our code, we can discharge that cognitive load. This will lead to a freer mind and easier and more effective days.

Loopy production flow

I wrote an article about how useful it is to see the steps in the production flow. By showing the production flow, we know where we are and how good we are. We can then adapt our work/prioritization.

We then can spot and identify problems and solve them - they are called “red bins” in lean production. Displaying the problems in front of the whole team helps to highlight how they are slowing the whole process down. That way they can't be ignored and actions must be taken.

Loopy user satisfaction

The better we understand user needs, the clever we can work. There is no shame about being wrong in the first place. The most important thing is to acknowledge and adapt.

Make your tools work for you not against you

We tend to believe that a part of our job is to use specific tools and deal with its disadvantages because "we're used to it and it's always been that way". We tell ourselves: this is my job and if I fail, it'll be on me. Of course it's a bit more complex than that. In our day to day work, we all make mistakes: these ‘human errors’ are not a cause but a symptom of a deeper problem in your system. Understanding how and what causes a ‘human error’ to arise is the beginning of understanding a little bit about a complex system. And in an overly complex system, being able to adapt with feedback loops is better than being able to predict.

Shorten the loops

Your time is valuable, your focus is valuable, this is all about you and enhancing your work. The quicker you get feedback, the faster you can adapt. And the more feedback you get the more you work smarter.

*We shape our tools then the tools shape us.*

This article was inspired by the Loopy tool from Nicky Case, I can only suggest you take a look!

Introduction to smart notes: how to take notes efficiently

Julien Calixte — Thu, 16 Dec 2021 22:48:45 +0000

If you are like me, then you've always struggled to take meaningful notes and usually give up on writing anything down. Still, deep down, you're looking for a way to write efficiently.

Why do you still have to write notes?

How frustrating is it to read a book or get a new idea during a meeting, and a few days later realize you already forgot about it? You are not alone.

Our brains are not reliable

The limits of our short-term memory

Learning new things could be summarized as the process of linking items that are in our short-term memory to our long-term memory, by far more efficient and reliable. Short-term memory is really convenient to retrieve information quickly. Unfortunately, our short-term memory is extremely limited: it's quickly crowded—4 (± 1) blocks of information at a time—and very short-lived. It isn’t suitable for complex reflection.

To make it even worse, the following curve shows how information is quickly lost over time when there is no attempt to retain it. That’s why we tend to retrieve so little information from a book read months ago. It's called the forgetting curve.

In a nutshell, our brain is limited and quickly forgets the information it's been exposed to.

Our cognitive biases

Besides memory, brains aren't reliable because of many cognitive biases: confirmation bias, attentional bias, mere-exposure effect, normalcy bias, you name it. Even if it's the most complex system in our body, our brain must face many obstacles in order to not fool itself. For instance, more often than necessary, we look for arguments that unconsciously reinforce our original thoughts, we tend to argue with a pre-existing belief. This is what Julia Galef calls the “soldier mindset” in “The Scout Mindset”. She opposes it to the scout mindset: a mindset in which the search for the truth is what primarily guides its reasoning.

As the scout's goal is to draw the most accurate map in the battlefield, taking notes becomes the map for your thoughts: they tell you what you know, what you don't know and guide you through your reflection.

The concept of smart notes

Where do smart notes come from?

Smart notes is a term used in the book “How To Take Smart Notes” written by Sönke Ahrens that tells the story of Niklas Luhmann, a sociologist who has published hundreds of articles thanks to his note-taking system: the Zettelkasten method.

Creating the system

Taking notes tends to mean “jotting down ideas on paper during meetings”. But we rarely use them afterwards. Notes used once or twice are no good, we can’t take advantage of them. Note-taking without structure is pointless. That’s why we have to create a system where each note helps the system snowball effect.

We want a network of permanent notes. The goal is to write permanent notes and to densely connect them together. But to create notes you're proud of, you must iterate a few times with other kinds of notes. Overall, we can look at 3 kinds of notes:

fleeting notes,
literature notes,
permanent notes.

Fleeting notes

Fleeting notes are your day-to-day notes. When an idea pops into your head or you find an idea interesting in a meeting, you want to write it to free your mental load. They are primarily the pool of new concepts.

Then comes the refinement of the notes. For this, you need to instigate a routine: clearing and deleting non-relevant paragraphs, extracting the ideas into concise notes. This routine is key to accumulate knowledge.

I suggest getting a note per day and starting the routine at a small scale: create a fleeting note each day but refine them only once a week.

Literature notes

Literature notes are the notes you take on the fly when you are reading a book, a blog post or listening to a podcast. With a pen and a paper next to you, you write with your own words your understanding of the read. The key feature here is that we want a much more active lecture and information consumption than just passive reading/listening. It may seem hard at first but once you incorporate this new habit, you feel almost disappointed reading without extracting what seems compelling.

Permanent notes

Permanent notes are atomic and connected. A permanent note is about one and only one concept, as simple as possible and connected with others. They come from the selected thoughts chosen from your fleeting and literature notes. They are the backbone of the system so you want to be extremely selective about what will become a good durable note.

When creating a permanent note, scan your previous notes and find connections with the new one. It’s the rule: the only way a permanent note can integrate the system is from connections.

Improve yourself step by step

We want the system to work like our brain: simple ideas linked together as a network of thoughts. We want to start small, one note at a time.

Your notes don't need to be perfect straight away, in fact, they will never be. Because writing is hard.

Actually, writing is a multiple-tasking process:

writing ideas on the go,
extracting relevant information,
criticizing,
making the writing shorter and the concept clearer,
rewriting and rewriting again…

We want to separate these different tasks as much as possible because they can inhibit each other. When you write, don’t be afraid of being weird or dumb, there will be a time for self-critic. For now just write as if you were teaching it to your younger self.

It might feel uncomfortable.

“Is it me or is a 10 year old child writing this?”. Still the more you iterate, the better your notes become, I promise. 😊

Smart notes are your first feedback loop

This is where it gets exciting. Since you know you will be able to review your notes by yourself, you become better and better at writing and therefore your way of thinking. Notes are the medium between your past, present and future self. Plus, if you become comfortable with your own critique, you'll find yourself accepting even more the challenges of others as you simply want to improve your system.

How smart notes benefit me

I’ve been using this system for the past year and so far it works!

Here is a non-exhaustive list of things I like about it:

📝 I can write a blog post—like this one–just by picking ideas from my own notes: no more blank page syndrome,
🧠 trusting one and only one system allows the brain to truly free itself from mental load: you know you can go back to your thoughts and ideas later,
🕸 making connections between work, hobbies and entertainment create new ideas in a way I didn't expect, I feel more creative!
📈 as I said earlier, I’m much more incline to face challenges from other people and ask colleagues how I can improve my work,
🪴 watching your network grow is rewarding! It’s like taking care of your own little garden.

As great as it is, I want to warn you about a few pitfalls into which you could be tempted to fall:

collecting only for the sake of collecting isn’t helpful. We don’t need it.
creating a system per project: we lose the essence of the system; we want to be able to connect notes that don't seem connected at first sight.
thinking too much of the tree structure for your notes in your taking note app: it is not that important, we just want to look for notes easily,
copying and pasting what we find on the internet: link the page you want to reference but if the notes are not your own, the system becomes irrelevant (and I quote CGP Grey: "If your mind is forever filled with the voice of others, how do you know what you think about anything?").

With all this in mind, I made a personal slip-box I'll be completing over time to let you explore concrete examples!

Introducing smart notes for others

I’m currently wondering if there are other potential applications to the Zettelkasten method other than using it ourselves. At BAM, I work as a team leader and I constantly ask myself how we can improve our way of communication through time in projects. Just like visual management, good documentation is essential for a project to succeed. Having clear standards connected to more detailed concepts is the ultimate documentation! But I haven’t fully experienced it yet. What do you think? Let me know in the comments or you can reach me on Twitter @julien_calixte!

How does visual management improve team efficiency?

Julien Calixte — Wed, 29 Sep 2021 16:51:53 +0000

When I started my career as a developer 8 years ago I struggled to have a global view and see the big picture in my missions. I developed many projects and sometimes reverted my work depending on what I was asked for.
It was frustrating and counterproductive. Discovering Visual Management has been a game changer in my career.

We'll see together how visual management can drastically help a team to get a clearer vision, to be more aware of improvements and accountable for the project’s main goals. We will be focused in the production flow that is a tiny part of Visual Management.

Visual management tries to solve ambiguity

Hi, my name is Julien. I'm a manager at BAM and my goal is to bring the team to succeed in every challenge and mission. And that’s not an easy job! At BAM, we are able to simplify the task through what we call Visual Management.

Let me clarify the problem we want to solve: how can we onboard people, have a common vision and share as much information as possible within the team to make better decisions?

This is a really ambitious goal. The good news is every step going forward is a small improvement in team comprehension about the product and how the product is made. In order to achieve that we divide it in two main steps:

Show your flow
Show your challenges

First step: start with the flow

Draw the steps

Let's say you are developing a product. This product has a set of features. "Show your flow" means displaying everything a feature needs to achieve before ending in the users' hands. So how does the team achieve that goal?

Name the steps,
make a list of the prerequisites to complete these steps,
define the output required in each step,
clarify who needs to complete these steps.

You may need some good tips:

start from the end,
prerequisites and outputs should be understood by every one,
set up the process for a specific feature, then find a more generic flow,
set up detailed and specific steps into place even if few features need them,
go as far as you can to define the outputs.

There are many tools you can use as a board: Miro, Notion, Trello, Fibery, use whichever fits you. Here is an example of what it can look like:

This is a board of how you develop an app at BAM but it can be done in every profession.

The board allows you to show the progress of every feature and how close they are to being done. On the one hand it helps clarify the process with your team too and on the other hand it challenges your decisions as a team leader – “why do you start a new feature if we haven’t finished this one yet?”. Trust me, you would be surprised by how much people's thinking process diverges.

Be as specific as possible, this is not about how your team works but how the product is made. If the product depends on another team, add this information as a step and define what you expect from them. We want to see each team working on the product as blackboxes with inputs and outputs.

Consolidate and simplify your visual management

Make sure the inputs and outputs are feasible and that every step can be done without going backwards in the process. Then look for simplification: are we able to remove steps? Can we postpone some of them? Are all the team members attending meetings and are those sufficient? Are we able to know if all the prerequisites are outputs from previous steps?

Then on a daily basis, the team updates the feature status and sets up rules on how to prioritize tasks: pull system, minimum or maximum stock for each step, etc. These rules are your North star and help your daily decision making.

This is why it is called visual management. It helps you manage a project as it shows you the next thing to do according to your set rules. This is really powerful: the decision process shifts from one manager to a whole team using the information at its disposal to make the best possible decision. And because information is so crucial to making a decision, we can come up with a new project standard: “every shared idea must be written down and available to everyone”.

Once you are able to create a board with daily updates the real power of visual management is to be able to improve the efficiency of the team which will require you to implement the following mandatory step.

The key in visual management is to show problems

Visual management will help you with efficiency as it will highlight the struggles of your team in the development of a product. There are multiple kinds of problems the team will face and wants to address: steps taking too long, rework, too many features stuck in a particular step, waiting for another team to complete their tasks.

However, to be able to solve problems, we first need to acknowledge them and see them. Let’s take a look at rework.

Add a line in your flow called “red bins”. Every time you need to go back to complete a task, create a red bin mentioning the problem and the reason why you need to go back. Red bins are waste that can be prevented in the future if the team solves the root cause of the problem and learns from them.

Red bins will start to stack in particular steps. After a while, it will become clear which columns the team needs to focus on. Find out what can be improved and check if red bins are still occuring for similar reasons.

Visual management really shines in the long run

Achieving a clear visual process of your work will take some time. The path may not be completely obvious yet but knowing where the improvement lies is the first step to dive into it, transform your entire work dynamic and give you a clear and common vision.

The more a team is autonomous and proactive on what action to take next, the more the manager's role evolves. He or she takes on a support role in the team, improving and solving problems along the way.

Again, we've seen here only how we can visualize our production flow, but visual management is much more: detecting defects, lead times, touch times, standards, red bins, blue bins, etc.

Finally, visual management is like a map you update every day: it guides you through what you know and what you don't know yet. Having red bins is expected and this is OK, what matters most is that you stick on a continuous improving path!

Are people ready for PWA?

Julien Calixte — Thu, 28 May 2020 21:13:31 +0000

Hi!

Do you think people are ready to use a product that is only accessible with a PWA?

People are now trained to search on stores and install the app even when there is a website, only the app is the real product.

In other words, do you think a product can be profitable with a Progressive Web App only? Or definitely needs a native or desktop apps...

Easy Web Worker integration in VueJS

Julien Calixte — Fri, 17 Apr 2020 15:26:35 +0000

The main thread

Web workers are super handy to make heavy computation and not blocking the main thread. So the user doesn't have his webpage blocked by too much JavaScript working behind.

Example in VueJS

We can see how to use them easily in VueJS. Start by installing comlink-loader. Wait, what is Comlink? And comlink-loader?

Comlink is a library that simplify the way we call web workers, it will be as simple as calling an async function in our code. This lib was created by Surma.

comlink-loader is simply the webpack loader that we will use to tranform files *.worker.js into web workers.

So here we go:

yarn add -D comlink-loader

Now, here's the trick to add the loader in your vuejs configuration. It is explained here.

module.exports = {
  configureWebpack: (config) => {
    config.module.rules = [
      {
        test: /\.worker\.js$/i,
        use: [
          {
            loader: 'comlink-loader',
            options: {
              singleton: true
            }
          }
        ]
      },
      ...config.module.rules
    ]
  }
}

Finally we can use it this way:

Create a file that ends with .worker.js and export async functions,

// utils.worker.js

export const helloWorld = async (params) => {
  // heavy computing goes here
}

Import them in vue files.

import { helloWorld } from '../workers/utils.worker'

export default {
  name: 'HelloWorld',
  data: () => ({
    msg: ''
  }),
  async mounted() {
    this.msg = await helloWorld()
  }
}

Remember, it will always be async methods, so make sure to await them.

Set and done!

You can have a look at the quick example I've made to illustrate how web workers can impact user experience here: vue-worker-example.netlify.app. See if the button is clickable when the page is computing with and without background tasks.

Thanks for reading!

Live sync in React Native with CouchDb

Julien Calixte — Thu, 16 Jan 2020 16:56:45 +0000

This post was originally published at bam blog

Live sync in React Native with CouchDb

Intro

In this tutorial I will show you how to create a live game with data updating on multiple devices.

Let's start with something fun and basic! A game in which two people will be able to play together online. Let's make a live Rock - Paper - Scissors game. I've already programmed it here so we can focus straight away on the cool stuff 😄.

This is a perfect opportunity to see how to build live data syncs in a mobile app with CouchDb. You'll of course be able to exploit these two technologies in many more use cases but this is a good way to start.

Thanks to CouchDb we don't need to build any backend! By the end we'll have a React Native app connected to a local CouchDb database. This basic game will help us concentrate on the essentials parts: the live sync & update on our React component. Feel free to explore the components to understand how it's displayed. Let's start!

1. Overview

Rock-Paper-Scissors

What exactly will our online game be able to do?

The famous and popular Rock-Paper-Scissors will be played by two people who will join the game thanks to its id. Other users will also be able to participate and join as spectators. After each round, the app will update the game and at the end display the final score.

Here a quick demo of what a player will see.

First steps are to clone the repo and simply run the command yarn.

What is CouchDb

Before getting deeper into the app, let's dive into the technology behind it.

CouchDb

CouchDb is a NoSQL database accessible via a RESTFUL API. The singularity of CouchDb is that data is immutable. Each update of a document (NoSQL data) is a new document linked to its previous versions by a common _id. So, like in git, a historic tree can be made listing all the modifications of a document. Each update modifies the property _rev like _rev: 12-ad32d26. This is the version of the document (_rev is for revision 🤫).

CouchDb masters in database replications. As it's possible to know what has been modified by an _id and a _rev prop, it's easy for a database to distinguish a delta and replicate from another one. At this stage the most important will be the replication of a distant database to a local one.

CouchDb Documentation

To work on our game, we'll need to install CouchDb locally.

Installation

To install CouchDb locally, go to their website.

Configuration

Create an admin and configure CouchDb as a single node.

Create the `RPS` database

Then, go to the "Databases" tab and create de database called rps.

Install CouchDb in React Native

Easy! You only have to run yarn add pouchdb-react-native and you're set!

PouchDb

If CouchDb can store data in a server, PouchDb helps us manipulate data in locale database. PouchDb is close to CouchDb as they share the same API.

PouchDb Documentation

Let's dive into the code!

Sync

We want to share a document Play in real-time. How do we do that? We are going to replicate the local database and the database from the server. PouchDb has a really good method for it called sync. If there is one reason to use PouchDb it's for the sync method! Take a look at this quote from PouchDb documentation:

CouchDB was designed with sync in mind, and this is exactly what it excels at. Many of the rough edges of the API serve this larger purpose. For instance, managing your document revisions pays off in the future, when you eventually need to start dealing with conflicts.

We use it this way: localDB.sync(remoteDB). This method is a shortcut for:

localDB.replicate.to(remoteDB);
localDB.replicate.from(remoteDB);

sync has many options and in our case we'll need the following settings:

a live sync so we add the property sync to true,
a synchronization that persists and retry when there are connection problems. So we define the retry prop as true.
We don't want to synchronize the whole database, only the current game. Fortunately, CouchDb and PouchDb can manage that for us with a filtered replication. There are many ways to do a filtered replication but the most efficient one is to give to sync the array of ids we want to listen to.

For more details, I recommend this excellent PouchDb documentation

If we have a look at the whole code, this is what we should see:

// Repository/index.ts

public liveGame(id: string): void {
  this.cancelLive();
  const ids = [`${id}_${Player.Player1}`, `${id}_${Player.Player2}`];
  this.sync = this.local
    .sync<{}>(this.remote, {
      live: true,
      retry: true,
      doc_ids: ids,
    })
    .on('change', result => {
      console.log('change', result);
      bus.emit(SYNC_UP, {
        id,
        result,
      });
    });
}

This is pretty simple, isn't it?
We added an event SYNC_UP to make our React component reactive. We'll listen to it later.

Merge

During a game each player will update his own document so we won't have to deal with conflicts. But our component can only handle one document Play to display plays and scores. At this stage we only have one work left to do: to fetch the two documents in the database and merge them into one.

In the file PlayService., we'll call the method mergePlays where we use a spread operator to merge the two documents. But there is a little more work to do when we want to gather play turns (in which each player updates their moves). For each turn, we retrieve the move of the player 1 in the player 1's document and the move of the player 2 in the player 2's document. Like this:

// PlayService.ts

private mergePlays(play1: IPlay | null, play2: IPlay | null): IPlay | null {
  // If one of these two documents is null just return the other one.
  if (!play1 || !play2) {
    return play1 || play2;
  }
  const play = {
    ...play1,
    ...play2,
  };

  const turnCount = Math.max(play1.turns.length, play2.turns.length);

  if (!turnCount) {
    play.turns = [];
  } else {
    play.turns = Array.from({length: turnCount}).map((_item, index) => {
      const turn1 = play1.turns[index];
      const turn2 = play2.turns[index];

      const player1 = turn1 ? turn1.player1 : null;
      const player2 = turn2 ? turn2.player2 : null;

      const turn: ITurn = {
        player1,
        player2,
        winner: null,
      };
      turn.winner = this.getWinner(turn);
      return turn;
    });
  }
  return play;
}

The React Native component

Now that all the settings are in place to sync, it's finally time to display our game on screen. The code below is the page Play after the player submits the game id in the home page. We can initialize the liveGame; telling PouchDb to only syncs documents we need.

When fetching the play if there is no player 2, we join the play 🙂.

We can listen to changes by adding a listener to the SYNC_UP event from our PouchDb repository.

// src/views/Play.tsx

const id = navigation.getParam('id') as string;
const [play, setPlay] = useState<IPlay | null>(null);

const getPlay = async () => {
  const playFromDb = await PlayService.get(id);
  setPlay(playFromDb);

  // ...

  // If there is no player 2 when fetching the game, we'll be able to join in.
  if (playFromDb && !playFromDb.player2) {
    await PlayService.joinPlay(id, store.uuid);
  }
};

useEffect(() => {
  bus.on(SYNC_UP, getPlay);
  repository.liveGame(id);
  getPlay();

  return () => {
    bus.removeListener(SYNC_UP, getPlay);
  };
}, []);

A picture is worth a thousand words

For a quick sum up, find below the 3 main steps:

Player 1 creates the play
- Player 1 saves a local document

   {
     "_id": "12345-player1",
     "player1": "uuid-player1",
     "player2": "",
     "turns": [],
     "_rev": "1-abc"
   }

The app right after syncs with the server and saves the document
Player 1 waits for a Player 2 to come by listening to any updates from the server of documents with ids "12345-player1" and "12345-player2"

Player 2 joins the play
- Player 2 joins the play by fetching and updating the player 1's with his uuid in 'player2' attribute.
- Player 2 creates a local document

   {
     "_id": "12345-player2",
     "player1": "uuid-player1",
     "player2": "uuid-player2",
     "turns": [],
     "_rev": "1-bcd"
   }

Player 2's app syncs with the database and saves the two documents

The play is ready
- Player 1 gets the updates and is now ready to play the first round
- Player 1 and player 2 save their document locally and then share them with the server. That way every player receives updates from their opponent.
- The app merges the two documents into one, so we can calculate who wins the round 1 and update the score.

Conclusion

DONE! We've completed our first live sync between two databases in React Native, awesome!

There is so much more we can explore now. Here a few examples:

create an offline-first app to provide a seamless experience either the app is online or offline.
create an app that shares data in Bluetooth without the need of an Internet connection (like shareable books in a region where the Internet is expensive)
create an app where people can collaborate in live.
and so on...

Creating a VueJS component for online/offline events

Julien Calixte — Thu, 14 Nov 2019 20:03:29 +0000

Hi folks!

I've recently created a node module and I thought it could be interesting to review it together, if you want to publish a component that you use on multiple VueJS apps.

The component is named vue-online-offline.

Of course, there are others components and directives that can be used to know if your app is online or not. Be I find useful to have a small component with events & slots that can be used everywhere without any global variables, just a simple reusable component 😊.

Usage

Here an example when it can be used. (Pro tip: if you're displaying the same component and only change its properties, remember to add a key on your component to force VueJS to rerender it)

<template>
  <vue-online-offline @online="isOnline" @offline="isOffline">
    <ArticleList slot="online" key="online" :online="true" />
    <ArticleList slot="offline" key="offline" :online="false" />
  </vue-online-offline>
</template>

<script>
import VueOnlineOffline from 'vue-online-offline'

export default {
  components: { VueOnlineOffline },
  methods: {
    isOnline() {
      console.log(`Now I'm online!`)
      // Show toaster 'Success! you're online!'
    },
    isOffline() {
      console.log(`Now I'm offline.`)
      // Show toaster 'Information: you're now offline but you can still read your local articles.'
    }
  }
}
</script>

How does it work?

So, here is the component.

<template>
  <div class="online-view">
    <slot v-if="online" name="online"></slot>
    <slot v-else name="offline"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      online: navigator.onLine
    };
  },
  mounted() {
    window.addEventListener("online", this.onchange);
    window.addEventListener("offline", this.onchange);
    this.onchange();
  },
  beforeDestroy() {
    window.removeEventListener("online", this.onchange);
    window.removeEventListener("offline", this.onchange);
  },
  methods: {
    onchange() {
      this.online = navigator.onLine;
      this.$emit(this.online ? "online" : "offline");
    }
  }
};
</script>

It is quite simple with two slots and events emitted thanks to the online/offline events available.

Create and build the component

First, we will use the vue-cli command line tool: vue create vue-online-offline.

We can remove the components and assets folders as well as the main.js. Only the App.vue will be useful here, we replace the code with our own component.

Then VueJS command line tool lets you build a component for npmjs.org simply with a .vue file:

vue-cli-service build --target lib --name vue-online-offline

By default it will search for the App.vue file. You can look for more details in the documentation.

It will create a dist folder with your javascript files that will be used by other apps.

Publish as a node package!

We add the main property and specify the files in the package.json that's it! A new shiny package available for everyone! For instance, here my package.json :

{
  "name": "vue-online-offline",
  "version": "1.0.6",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name vue-online-offline",
    "lint": "vue-cli-service lint"
  },
  "main": "./dist/vue-online-offline.common.js",
  "license": "MIT",
  "files": [
    "dist/*"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/jcalixte/vue-online-offline"
  },
  "dependencies": {
    "core-js": "^3.3.2",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "keywords": [
    "vuejs",
    "vue",
    "component",
    "online",
    "offline",
    "slot",
    "event"
  ]
}

To publish, login & run the command npm publish.

Voilà ! Hope you enjoyed this little tutorial! Let me know if you have any question, I'll be glad to answer it.

Love.

VueJS PWA assets generator

Julien Calixte — Fri, 25 Oct 2019 07:24:56 +0000

TLDR : npx vue-pwa-asset-generator -a {your_512x512_png_source or your_svg_source} -o {your_output_folder}. You're done!

Hi folks!

When I develop for side projects, most of the time I use the stack VueJS with the PWA plugin, CouchDb/PouchDb for my backend and publish my Progressive Web App on netlify. There is a simplicity in this stack I love.

But I've always been struggling with generating the assets to put in the manifest.json and I haven't found any help on the internet. So here we are, I created the generator myself!

It is named vue-pwa-asset-generator! With sharp it was really simple.

So, what does it do? It generates all the assets that exist by default in your public/img folder and the favicon.ico as well as the icons attribute in a manifest.json that you can merge with your actual manifest.json. All you need is one png image first and it does the rest!

Here an example of use, once installed : vue-asset-generate -a logo.png -o img

Hope it helps you too! 😃

Love.

Extra: it now works with svg files too!

https://www.npmjs.com/package/vue-pwa-asset-generator
https://github.com/jcalixte/vue-pwa-asset-generator

Programming and the fight against climate change

Julien Calixte — Wed, 20 Dec 2017 07:29:33 +0000

I've been programming for 5 years and I've never worked directly in a project with a clear goal like to lower our carbon footprint even if this is a question I'm asking myself everyday to improve the situation. The only thing that comes close is that I'm currently developing a web app for a French company to limit paper documents on their parts repair.

In the meantime, our domain has a footprint exceeding air travel.

So, in my case, this is obviously not enough in a larger scale. I need to do a lot more. So I was wondering what do you do in your workday to improve the climate situation? Do you work in the climate field? Is the Earth a concern in your every day business?

Finally, in general, do you think, as a developer, we can have a positive impact on this global warming?

Hi, I'm Julien

Julien Calixte — Tue, 10 Jan 2017 18:20:33 +0000

I have been coding for 3 years.

You can find me on Twitter as @julien_calixte

I live in Paris.

I mostly program in these languages: C#, JavaScript,

I am currently learning more about vuejs, webpack.

Nice to meet you :-)

DEV Community: Julien Calixte

Just in time documentation is the right documentation

Falling over the same trap again and again

Just in time

How does it work?

Developers, make your environment loopy 🔁

It starts with standards

Loopy code

Loopy tests

Loopy production flow

Loopy user satisfaction

Make your tools work for you not against you

Shorten the loops

Introduction to smart notes: how to take notes efficiently

Why do you still have to write notes?

Our brains are not reliable

The limits of our short-term memory

Our cognitive biases

The concept of smart notes

Where do smart notes come from?

Creating the system

Fleeting notes

Literature notes

Permanent notes

Improve yourself step by step

Smart notes are your first feedback loop

How smart notes benefit me

Introducing smart notes for others

How does visual management improve team efficiency?

Visual management tries to solve ambiguity

First step: start with the flow

Draw the steps

Consolidate and simplify your visual management

The key in visual management is to show problems

Visual management really shines in the long run

Are people ready for PWA?

Easy Web Worker integration in VueJS

The main thread

Example in VueJS

Live sync in React Native with CouchDb

Live sync in React Native with CouchDb

Intro

1. Overview

Rock-Paper-Scissors

What is CouchDb

CouchDb

Installation

Configuration

Create the RPS database

Install CouchDb in React Native

PouchDb

Let's dive into the code!

Sync

Merge

The React Native component

A picture is worth a thousand words

Conclusion

Creating a VueJS component for online/offline events

Usage

How does it work?

Create and build the component

Publish as a node package!

VueJS PWA assets generator

Programming and the fight against climate change

Hi, I'm Julien

Create the `RPS` database