DEV Community: Anthony Lagrede

You could do amazing things with a little JS 😊

Anthony Lagrede — Fri, 27 Dec 2024 09:59:34 +0000

How to create a simple agent for your Gmail inbox with Ollama and JS

Anthony Lagrede ・ Dec 27

How to create a simple agent for your Gmail inbox with Ollama and JS

Anthony Lagrede — Fri, 27 Dec 2024 09:47:27 +0000

Why Automate Your Tasks?

Hi all 👋! As an app developer, I’m excited to share how you can create simple yet powerful agents to automate your daily tasks.

📬 Like many of you, I receive an overwhelming number of emails every day. Despite my best efforts, achieving the elusive Inbox Zero remains a challenge. Sorting through emails like order confirmations and shipping updates is tedious and time-consuming.

But here’s the good news: automation can save the day!

🤖 I’ve written a basic script leveraging AI to help automate email categorization—and you can, too.

In this article, I’ll share reusable code snippets to help you build your own automation agents tailored to your needs. 🚀

The Beauty of Automation

There are countless tools, including no-code platforms, that can handle entire processes for you. However, I prefer breaking tasks into modular code snippets. Why?

Flexibility: Modular code can easily adapt to changing requirements.
Reusability: Write once, use forever.
Maintainability: Small, independent chunks of code are easier to debug and improve.

By taking an incremental approach, you can gradually replace manual steps with automated ones.

👩‍💻 My personal go-to tool for prototyping scripts is Znote—a notebook with live coding and AI that helps me track and enhance my workflows. Otherwise use your favorite IDE!

Let’s Build an Email Automation Agent

Goals

When a new email arrives, we want to:

Read the email and extract relevant information.
Use an LLM to determine its category from a predefined list.
Create Gmail labels (if they don’t already exist).
Update the email’s labels to reflect the assigned category.

Getting Started

Prerequisites

Step 1: Enable Gmail API

Go to the Google Cloud Console and enable the Gmail API.
Set up OAuth credentials for a desktop application. Follow these steps to download your google-credentials.json file and place it in your project directory.

Step 2: Install Ollama

Download Ollama to run a local LLM. Once installed, download a model:

ollama pull mistral

Step 3: Install Dependencies

Install the required Node.js libraries:

npm install -S @google-cloud/local-auth googleapis openai

Writing the Code

1. Authenticate with Google API

Set up an OAuth connection to Gmail:

// google-api.js
const fs = require("fs");
const path = require("path");
const { authenticate } = require("@google-cloud/local-auth");
const { google } = require("googleapis");

class GoogleAPI {
  constructor(credentialFilename) {
    this.TOKEN_PATH = path.join(__dirname, `token-${credentialFilename}`);
    this.CREDENTIALS_PATH = path.join(__dirname, credentialFilename);
    this.SCOPES = [
      "https://mail.google.com/",
      "https://www.googleapis.com/auth/gmail.modify",
    ];
  }

  async authorize() {
    const loadSavedCredentials = () => {
      try {
        const content = fs.readFileSync(this.TOKEN_PATH);
        return google.auth.fromJSON(JSON.parse(content));
      } catch {
        return null;
      }
    };

    const saveCredentials = (client) => {
      const keys = JSON.parse(fs.readFileSync(this.CREDENTIALS_PATH));
      fs.writeFileSync(
        this.TOKEN_PATH,
        JSON.stringify({
          type: "authorized_user",
          client_id: keys.installed.client_id,
          client_secret: keys.installed.client_secret,
          refresh_token: client.credentials.refresh_token,
        })
      );
    };

    let client = await loadSavedCredentials();
    if (!client) {
      client = await authenticate({
        scopes: this.SCOPES,
        keyfilePath: this.CREDENTIALS_PATH,
      });
      if (client.credentials) saveCredentials(client);
    }
    return client;
  }
}

module.exports = GoogleAPI;

2. Create Gmail Labels

Use this function to create labels and retrieve their IDs:

async function createAndGetLabels(labelsToCreate) {
  const google = await getGoogleClient();
  const gmail = google.gmail({ version: "v1" });

  const existingLabels = (await gmail.users.labels.list({ userId: "me" })).data.labels || [];

  const labelsMap = new Map();
  for (const label of labelsToCreate) {
    const existing = existingLabels.find((l) => l.name === label);
    if (existing) {
      labelsMap.set(label, existing.id);
    } else {
      const res = await gmail.users.labels.create({
        userId: "me",
        requestBody: { name: label },
      });
      labelsMap.set(label, res.data.id);
    }
  }
  return labelsMap;
}

3. Read Emails

Extract details from message api:

async function readEmails(gmail, maxResults = 10) {
  const res = await gmail.users.messages.list({ userId: "me", labelIds: ["INBOX"], maxResults });
  return Promise.all(
    res.data.messages.map(async ({ id }) => {
      const email = await gmail.users.messages.get({ userId: "me", id });
      return email.data;
    })
  );
}

4. Decrypt relevants infos

Extract meaningful details from emails:

function extractMailInfos(mail) {
  // Define the headers to extract
  const relevantHeaders = ["Date", "Subject"];

  // Extract and structure the relevant headers
  const headers = mail.payload.headers
    .filter(header => relevantHeaders.includes(header.name))
    .reduce((accumulator, header) => {
      accumulator[header.name] = header.value;
      return accumulator;
    }, {});

  // Add the unique mail ID directly to the headers object
  headers.id = mail.id;

  return headers;
}

5. Use an LLM for Categorization

Integrate Ollama or OpenAI to classify emails:

async function classifyEmail(prompt) {
  const { OpenAI } = require("openai");
  const openai = new OpenAI({ baseURL: "http://127.0.0.1:11434/v1", apiKey: "not-needed" });

  const response = await openai.chat.completions.create({
    model: "mistral",
    temperature: 0.3,
    messages: [{ role: "user", content: prompt }],
  });

  return response.choices[0].message.content.trim();
}

Putting It All Together

Here’s how everything works together:

const labelsToCreate = ["Order", "Shipping", "Newsletter", "Other"];
const labelsMap = await createAndGetLabels(labelsToCreate);

const promptSystem = `
Your role is to determine the category of the emails by choosing from the categories listed below.

Here are the possible categories:
- Order
- Shipping
- Newsletter
- Other

You must return in response the name of the category without further explanation and without quotation marks.
`

const rawEmails = await readEmails(gmail);
const emails = rawEmails.map(m => extractMailInfos(m));
for (const email of emails) {

  const prompt = `${promptSystem}
    Categorize this email: ${email.Subject}`;

  const category = await classifyEmail(prompt);

  if (labelsMap.has(category)) {
    await gmail.users.messages.modify({
      userId: "me",
      id: email.id,
      requestBody: { 
        addLabelIds: [labelsMap.get(category)],
        //removeLabelIds: ["INBOX"],
      },
    });
  }
}

🎉 That’s it! Your inbox is now smarter and more organized.

Go further

For more automation ideas and reusable scripts, check out this Gallery. You will find more advanced examples to export for reading email content, sending drafts, and building everything you need for fully automated responses.

👉 ❓I’d love to hear about the libraries you use to build your automations as a developer!

Organize the mess of your photo folders with Node

Anthony Lagrede — Tue, 21 Nov 2023 16:31:00 +0000

If you have trouble organizing your photos spread across several folders like me, this article can help you!

I recently experienced a hard drive crash 💥 containing all of my photos 😢. Luckily, I found backups and recovered some photos from friends and family. But I really had a hard time organizing all these photos. After 4 days of repetitive renaming and moving tasks, I decided to create a script to automate this horribly time-consuming task and maybe save someone else.

As you can see it was a bit of a mess 😅

Defining an effective organization

The paragraph below is an opinionated thought. You are free to implement any other organizational system with the code given.

My first try was to move all the photos and videos into a single folder and let the "Last Updated Date" sort it. Simply scroll to the desired date and view photos from that period. But several thousand photos in a single folder took too long to load and scroll through. Moreover, I had too many name conflicts with photos with the same name from different smartphones.

Second try: Divided by year and month. Few photos in folders, few conflicts. After organizing a few years of photos, I realized that it was painful to read. I was constantly changing folders to view my photos. A really not pleasant experience.

Third try: Just divided by year. Not too many photos in folders, a significant number of name conflicts. But easy to read without changing folders to watch them. This looks better but there are still quite a few name conflicts to resolve…

👉 I chose the option: divide by year to easily navigate over time and limit the loading time of each folder

Create a Node script to import once

The code below recursively scan folders and copy photos to an output folder divided by year. Enough for a single run, but will override photos on incremental import.

const { resolve } = require('path');
const { readdir } = require('fs').promises;
const path = require('path');
var fs = require('fs')

const inPathdir = "/Users/alagrede/Desktop/inputPhotos";
const outPathdir = "/Users/alagrede/Desktop/photos/";


// recursively read folders
async function* getFiles(dir) {
  const dirents = await readdir(dir, { withFileTypes: true });
  for (const dirent of dirents) {
    const res = resolve(dir, dirent.name);
    if (dirent.isDirectory()) {
      yield* getFiles(res);
    } else {
      yield res;
    }
  }
}

(async () => {
  let totalCount = 0;
  for await (const f of getFiles(inPathdir)) {
    const name = path.parse(f).name;
    const dirname = path.dirname(f);
    const extname = path.extname(f);
    const stats = fs.statSync(f);
    const time = stats.birthtime;
    const year = time.getFullYear();
    const yearDir = outPathdir + year + "/";

    if (!fs.existsSync(yearDir)) {
      fs.mkdirSync(yearDir);
    }

    const dateformatted = time.toISOString().split('T')[0]; // 2012-10-25
    const outFilename = `${yearDir}IMG-${dateformatted}_${count}${extname}`;

    fs.copyFileSync(f, outFilename);
    fs.utimesSync(outFilename, time, time);
    totalCount++;
  }

  console.log(`Successfully imported ${totalCount} files`);
})()

Improve to import incrementally

Now we do the same thing but this time searching for the last photo number in each year folder to no longer overwrite existing photos.

const { resolve } = require('path');
const { readdir } = require('fs').promises;
const path = require('path');
var fs = require('fs')

const inPathdir = "/Users/alagrede/Desktop/inputPhotos";
const outPathdir = "/Users/alagrede/Desktop/photos/";

// recursively read folders
async function* getFiles(dir) {
  const dirents = await readdir(dir, { withFileTypes: true });
  for (const dirent of dirents) {
    const res = resolve(dir, dirent.name);
    if (dirent.isDirectory()) {
      yield* getFiles(res);
    } else {
      yield res;
    }
  }
}

(async () => {

  const sortByNameFunc = function(a,b) {
    const nameA = path.parse(a).name;
    const nameB = path.parse(b).name;
    if (nameA < nameB) return 1;
    if (nameA > nameB) return -1;
    return 0;
  }

  const sortByBirthtimeFunc = function(a,b) {
    return fs.statSync(a).birthtime - fs.statSync(b).birthtime;
  }

  async function getFilesSortedBy(dir, sortFunction) {
    let files = []
      for await (const f of getFiles(dir)) {
        // avoid considering hidden cache files
        if (!path.parse(f).name.startsWith(".")) 
          files.push(f);
      }
      return files.sort(sortFunction);
  }

  async function getMaxCounterInDir(dir) {
    const files = await getFilesSortedBy(dir, sortByNameFunc);
    if (files.length === 0) return 1;
    return path.parse(files[0]).name.split(".")[0].split("_").slice(-1);
  }

  const inFiles = await getFilesSortedBy(inPathdir, sortByBirthtimeFunc);

  const currentCounterByYear = new Map();

  let totalCount = 0;
  // Start to copy files to dest
  for await (const f of inFiles) {
    const name = path.parse(f).name;
    const dirname = path.dirname(f);
    const extname = path.extname(f);
    const stats = fs.statSync(f);
    const time = stats.birthtime;
    const year = time.getFullYear();
    const yearDir = outPathdir + year + "/";

    // find the current max counter for year directory
    if (!currentCounterByYear.has(year)) {
      if (!fs.existsSync(yearDir)) {
        fs.mkdirSync(yearDir);
        currentCounterByYear.set(year, 1);
      } else {
        currentCounterByYear.set(year, await getMaxCounterInDir(yearDir));
      }
    }

    // copy file to dest
    const count = currentCounterByYear.get(year);

    const dateformatted = time.toISOString().split('T')[0]; // 2012-10-25
    const outFilename = `${yearDir}IMG-${dateformatted}_${count}${extname}`;

    currentCounterByYear.set(year, ++count);
    fs.copyFileSync(f, outFilename);
    fs.utimesSync(outFilename, time, time);
    totalCount++;
  }

  console.log(`Successfully imported ${totalCount} files`);
})()

Perfect for importing photos over time! And I’m super happy with this.

Just one more thing

I also want to show you how to avoid photo duplication, allowing you to import any folder with existing photos without worrying about it.

Remove duplicates

To find duplicate photos in bulk, I cross-reference the file size with the updated time. If these 2 values are exactly the same, I assume they are the same files.

const { resolve } = require('path');
const { readdir } = require('fs').promises;
const path = require('path');
var fs = require('fs')

const pathdir = "/Users/alagrede/Desktop/out/";

async function* getFiles(dir) {
  const dirents = await readdir(dir, { withFileTypes: true });
  for (const dirent of dirents) {
    const res = resolve(dir, dirent.name);
    if (dirent.isDirectory()) {
      yield* getFiles(res);
    } else {
      yield res;
    }
  }
}

(async () => {
  let m = new Map();

  // count files with same updated time and size
  for await (const f of getFiles(pathdir)) {
    const name = path.parse(f).name;
    const dirname = path.dirname(f);
    const extname = path.extname(f);
      if (!name.startsWith("."))
        const stats = fs.statSync(f);
        const length = stats.size;
        const mtime = stats.mtime;
        const timestamp = mtime.getTime();
        const key = `${timestamp}-${length}`
        if (!m.has(key)) {
          m.set(key, []);
        }
        m.get(key).push(f);
      }
  }

  // remove files appearing once
  for (let k of m.keys()) {
    if (m.get(k).length === 1)
      m.delete(k);
  }

  let totalCount = 0;
  for (let k of m.keys()) {
    let files = m.get(k);
    files.shift(); // remove the first file
    // Delete the others
    for (let f of files) {
      fs.unlinkSync(f);
      totalCount++;
    }
  }

  console.log(`Successfully deleted ${totalCount} duplicate files!`)
})()

Work done for today 👍

This system is enough for me to organize all photos and videos and enjoy viewing them without wasting time. I hope these scripts will help you.

You can find them here directly executable and editable through Znote. (A very simple way to work on this kind of script)

If you struggle with this tutorial, I also package a little app here: photo-organizer.app with advanced features (a bit long to explain in a single article but you will find below the libraries used). Among these features, you will be able to find similar photos (with pixel comparison) and resize images.

Librairies used:

Create useful automations with plain Javascript 🧑‍💻

Anthony Lagrede — Thu, 01 Dec 2022 09:52:24 +0000

Are you more automatic or manual?

Hi all 👋,
Continuing my contribution to the developer community as app maker, today I propose to discuss how to effectively automate tasks with NodeJS.

So... How many repetitive manual actions do you do each day? Probably a lot! 😐

And why...? Because automating your scattered actions is long and difficult. Don't have time to build and automate a complete process? Neither do I!

In fact, it's probably easier than you think. If writing automation is giving you a headache, it means you're probably not using the right tool.

An easy way is: Incremental Automation.
Write your process down in a note and start coding parts of your tasks. Thus, you can alternate between manual and automated actions.

I don't know about you, but personally I'm more comfortable learning by testing and prototyping. For me, the best way to achieve this was to use a Javascript playground using Markdown. That's why I recommend you give it a try to my app Znote to capitalize your work, otherwise no problem use your favorite IDE.

Choose a use case

Let's now see with a concrete example how to proceed to build a ready-to-use automation. The best way to do this is to start solving your own problems! So let me expose our first use case.

When I have new registered users, I had to regularly

connect to my remote database with SSH,
manually extract the users with an SQL query,
copy the results locally and compare with the existing users.
Once the new users were identified,
I sent a welcome email to each new member to get their feedback.

Make an SQL query on a remote database

1 - Make an SQL query

async function getSQL(sqlQuery, host, port, user, password, database) {
 const { Sequelize } = require('sequelize');
 const sequelize = new Sequelize(user, password, database, {
    dialect: "mysql"/* one of 'mysql' | 'mariadb' | 'postgres' | 'mssql' */,
    host: host,
    port: port
 });

 sequelize.authenticate();
 const [results, metadata] = await sequelize.query(sqlQuery);

 sequelize.close()
 return results;
}

2 - Make an SQL query with SSH

async function getRemoteSQL(sqlQuery) {
  const { spawn } = require('child_process');

  // connect to server (don't forget to copy your ssh-key on the remote server)
  const ssh = spawn('ssh', [
   '-L', '3307:localhost:3306',
   'user@XXX.ovh.net',
  ]);
  await sleep(4000); // wait connection
  // make SQL query (replace with your credentials)
  const data = await getSQL(sqlQuery, "localhost", 3307, "USER", "PASSWORD", "DATABASE");
  // quit
  ssh.kill();
  return data;
}

You can now just do anywhere in my notes an SQL query against your remote database

const users = await getRemoteSQL("select purchase_email from license;");
printJSON(users)

Identify new users

Then, we want to identify all new users since the query was last run.

function getNewUsers(incomingData, filename, key) {
  const fs = require('fs');
  let refData = [];
  try {
    refData = JSON.parse(fs.readFileSync(filename, 'utf8'))
      .map(element => key(element));
  } catch (err){}

  const delta = [];
   incomingData.forEach(obj => {
    if (refData.indexOf(key(obj))===-1) {
      delta.push(obj);
    }
  });
  printJSON(delta);
  return delta;
}

Send mail

Finally, we can send a mail to each new user. With Google, you need to generate a dedicated credential: https://support.google.com/accounts/answer/185833

function sendMail(recipients) {
  const nodemailer = require('nodemailer');

  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'XX@gmail.com', // your gmail
      pass: 'XXX', // app credential here
   },
  });
  const result = await transporter.sendMail({
   from: '"Anthony" <XX@gmail.com>', // sender address
    to: recipients, // list of receivers (,)
    subject: "Just to know if everything is fine 😊", // Subject line
    text: "Hi 👋, Being very concerned about the quality of Znote app, I thank you for any feedback you could give me, allowing me to improve my software!",   // plain text body
    html: "Being very concerned about the <b>quality</b> of Znote app, I thank you for any feedback you could give me, allowing me to improve my software!",   // html body
  });
  printJSON(result);
}

Plug everything in 🔌

It remains to describe our process by calling the different functions.

// get all users in remote database
const allUsers = await getRemoteSQL("select purchase_email from license;");
// show new users since last execution time
const newUsers = getNewUsers(allUsers, '/Users/alagrede/Desktop/users.json', it => it.purchase_email);
// write all users in file
fs.writeFileSync('/Users/alagrede/Desktop/users.json', JSON.stringify(allUsers));
// send mail
sendMail(newUsers.map(e=>e.purchase_email));

Tada!!

To summarize

You now have a bunch of reusable functions and an automated process. Since functions can be reused on other notes, you can capitalize on your existing work and continue to create additional processes. Then export your script, ready to run it in a cron.

👉 I hope this example will inspire you! Did you find this article useful? If so, I have plenty of other examples to share with you.

Go further

I will continue to add some examples when you need them.

Meanwhile, start turning your daily tasks into something easy and repeatable and your job will be more fun. 🌈️

You can check my blog 👉 here

If you want try Znote, it's 👉 here (I will be happy to take any comments)

Visualize 🔥 active fires 🔥 around the world 🌍 with Javascript

Anthony Lagrede — Fri, 02 Sep 2022 11:57:29 +0000

Originally posted on my blog

What we will learn?

In this article, we will see how to use open data with Plotlyjs and Streams through Znote in Javascript to explore active fire data around the world.

Active fire data

Thanks to the NASA which make available fires locations and Thermal anomalies with the MODIS system (Moderate-Resolution Imaging Spectroradiometer) onboarded in their two satellites (Aqua and Terra) it is possible to visualize how fires are distributed across the planet.

Where get data?

Last active fire data is available here.

If you want explore the history, it is also possible to ask archive here.

Dataset description

We start previewing the dataset to discover the available columns via a simple print with Danfojs

const df = await dfd.readCSV("https://firms.modaps.eosdis.nasa.gov/data/active_fire/modis-c6.1/csv/MODIS_C6_1_Global_7d.csv");
print(df); // or df.ctypes to list all columns

Full dataset description is here

World map of active fires

Each point is a new fire declared per day. It is shocking to see the number of new fires starting every day 😨

The map below scrolls through the months of July and August 2022

How build this map?

const summer2022 = "/Users/alagrede/Desktop/modis-active-fires-7d.csv";

const content = _fs.readFileSync(summer2022, 'utf8'); // read data file

function show(date) {
    // get lat/long fields for date given
    const latLong = content.split('\n')
        .filter(r=>String(r.split(",")[5]).startsWith(date))
        .map(r => [r.split(",")[0], r.split(",")[1]]) // lat/long
    latLong.shift(); // remove header

    var data = [{
        type: 'scattergeo',
        lon: latLong.map(r=>r[1]),
        lat: latLong.map(r=>r[0]),
        marker: {size: 2, color:'red'}, // draw fires
    }];

    var layout = {
        geo: {
            scope: 'world',
            resolution: 50,
            showland: true,
            showocean: true,
        },
        title: date,
    };
    Plotly.newPlot(el, data, layout);
}

// list days between 2 dates (functions used are described at the end of the article)
var daylist = await getDaysArray(new Date("2022-08-18"), new Date("2022-08-24"));

// loop over days
for(const day of daylist) {
    show(day);
    await sleep(500);
}

Refresh data (last 7d) ℹ️

We can now create a function to refresh the data and store it in a file. The last 7d file is directly available online.

const r = await fetch('https://firms.modaps.eosdis.nasa.gov/data/active_fire/modis-c6.1/csv/MODIS_C6_1_Global_7d.csv')
const content = await r.text();
_fs.writeFileSync('/Users/alagrede/Desktop/modis-active-fires-7d.csv', content);

Focus on a country

You can now focus on a specific country of your choice by selecting a center point and changing the map scope.

To find a specific geographical position, open Google map, select a point then copy/paste the latitude/longitude.

You could find the Plotlyjs API description here

var layout = {
    geo: {
        center: {lat: -46.449031, lon: 2.521705}, // France
        projection: {scale: 1.5}, // zoom
        scope: 'europe', // "africa" | "asia" | "europe" | "north america" | "south america" | "usa" | "world"
        resolution: 50,
        showland: true,
        showocean: true,
    },
    title: date,
};
Plotly.newPlot(el, data, layout);

France

As suggested above, you can add a slider to navigate manually in time

Plotly.newPlot(el+"-myGraph", data, layout);

// add a slider control (min - max - onChange callback)
const slider = await createSlider(0, daylist.length - 1, async function() {
   show(daylist[slider.value]);
   await sleep(200);
});

htmlEl.innerHTML=""; // reset result div
htmlEl.appendChild(slider); // add html slider
var graph = createElement("div"); // add the map into a div
graph.id = el+"-myGraph"; // plotly html id
htmlEl.appendChild(graph); // append map
show(daylist[0]);

Evolution of fires in France since 2000

Now that we know where the fires are, it might be interesting to see how the number of fires has changed since 2000.
This table reveals exceptional fire activity in 2003 reported in the media due to a massive heat wave in Europe.

2019 a new record
Forest fires: in France, in the middle of summer, the area burned is greater than in all of 2019

2022 also a new record...
France's unprecedented summer of wildfires, in maps and graphs

// All France fires count (make a ticket to ask history of fires)
const allfires = "/Users/alagrede/Desktop/fire_archive_M-C61_290304.csv";
const content = _fs.readFileSync(allfires, 'utf8');
const activeFires = content.split('\n');
activeFires.shift();
const count = activeFires
    // map to month
    .map(r=>String(r.split(",")[5]).slice(0,7)) // date field like 2008-08
    // map to year
    //.map(r=>String(r.split(",")[5]).slice(0,4)) // date field like 2008
    // group by
    .reduce((total, value) => {
        total[value] = (total[value] || 0) + 1;
        return total;
    }, {});

const data = [{
  y: Object.values(count),
  x: Object.keys(count),
  type: 'scatter'
}];

const layout = {
  title: "Evolution of active fires",
  height: 400,
  width: 500
}

Plotly.newPlot(el, data, layout);

Temperature anomalies

On the temperature side, there is a clear upward trend in temperatures since the 2000s.

This partly explains the increase in fires and why records are frequently broken.

const r = await fetch('https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/global/time-series/globe/land_ocean/ytd/12/1880-2016.json')
const json = await r.json();
//printJSON(json);
const result = Object.entries(json.data).map(year => [year[0], year[1]]);

const data = [{
  y: result.map(r=>r[1]),
  x: result.map(r=>r[0]),
  type: 'scatter'
}];

const layout = {
  title: "World temperature anomalies",
  height: 400,
  width: 500
}

Plotly.newPlot(el, data, layout);

World

Unsurprisingly, the world is following the same upward trend.

Others continents

Compared to Europe, the number of new fires declared on the African and South American continents is literally frightening... 😅

functions used in scripts

async function getDaysArray(start, end) {
    for(var arr=[],dt=new Date(start); dt<=new Date(end); dt.setDate(dt.getDate()+1)){
        arr.push(new Date(dt).toISOString().slice(0,10));
    }
    return arr;
}
async function sleep(time) {
  await new Promise(r => setTimeout(r, time));
}
async function createSlider(min, max, callback) {
  var slider = createElement('input');
  slider.type = 'range';
  slider.min = min;
  slider.max = max;
  slider.value = 0;
  slider.step = 1;
  slider.style.marginLeft = "0px"
  slider.style.width = "100%"
  slider.addEventListener('input', callback, false);
  return slider;
}

Go further

For those who want to take this example further, the entire Javascript notebook is available in my Github repo.

To facilitate the use of this data, this example was made with the interactive Znote app.

A powerful Javascript playground for Desktop 🔥

Anthony Lagrede — Mon, 21 Feb 2022 07:41:50 +0000

Last year I introduced a Javascript playground feature to my note-taking app Znote. Facing success with the community I decided to improve this feature to offer the best experience as possible to quickly run and test Javascript.

Ten months later, this aspect of Znote continues to change my use of JavaScript in my daily work, because now I am able to create scripts, explore a Dataset, automate tasks directly through the application.

Based on Markdown file, I'm able to run separately Javascript code block as browser or NodeJS code, create embedded functions, install NPM packages... So many possibilities that I had to create a dedicated documentation website to ensure to make users aware of all the possibilities.

The Birth of NotebookJS

To complete my value to the community and because Znote is primarily a note-taking app, I decided to create a dedicated app NotebookJS entirely focused around this Javascript playground.

Based on files and organized in tabs, NotebookJS give a unique way to quickly prototype Javascript, visualize data and document your work without forcing you to start complex projects.

I propose this app as complement of Znote to cover the most useful use-cases. I also set a cheap price to definitely buy the application, mainly to support my work and hidden fees behind it.

I'm so happy to provide a valuable software 😊. I would really like constructive feedback, so I will offer during 10 days, a perpetual free license to all users subscribing to the NotebookJS newsletter and wanting give it a try to my app.

You will receive the license on the email you provide on the newsletter form. Moreover, you will also receive later (ONLY) tutorials and tips about this application.

Leave your impression below or start a Github discussion if this requires a new thread.

I'm waiting you here: NotebookJS

I hope you will enjoy this app as much as I did creating it. ❤️

Terminal Setup - Make your Mac terminal awesome

Anthony Lagrede — Fri, 07 Jan 2022 16:48:50 +0000

I recently installed my new MacBook and set up my terminal. Here I'll show you how to do the same for your MacBook.

The final result

This is the end result based on the delicious powerlevel10k. Easy to configure and modify. Optimized to work as a developer.

You will notice the toolbar at the top (Cpu, Ram, Network) to always have an overview of the hardware consumption.

Prerequisites

Install Homebrew



/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install iTerm2 and git



brew install --cask iterm2
brew install git

Install Oh My Zsh



$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Theme installation

I choosed powerlevel10k probably one of the best and most flexible theme you can choose.
You can easily change your terminal layout simply by rerun the installation command.

Start to install MesloLGS Fonts



MesloLGS NF Regular.ttf
MesloLGS NF Bold.ttf
MesloLGS NF Italic.ttf
MesloLGS NF Bold Italic.ttf

Then install powerlevel10k itself



git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

In ~/.zshrc set the ZSH theme to use:



ZSH_THEME="powerlevel10k/powerlevel10k" in ~/.zshrc.

You will probably at least configure these two ZSH plugins:

zsh-syntax-highlighting - Fish shell like syntax highlighting for Zsh. This is what makes my aliases/commands green above. If it's green then it's installed!
zsh-autosuggestions - Fish-like autosuggestions for zsh. Will show a preview of the last matching command while typing. Press right to use

In ~/.zshrc set the ZSH plugins to use:



plugins=(
  git
  zsh-syntax-highlighting
  zsh-autosuggestions
)

Restart your terminal with Zsh

Now you can run



p10k configure

If you have issue with fonts, check MesloLGS font is selected.
Open iTerm2 → Preferences → Profiles → Text and set Font to MesloLGS NF.

Finally, if you want to include your existing bash aliases and functions:
In ~/.zshrc source your bash_profile just before the export ZSH



source ~/.bash_profile

Add the Toolbar

Open your iterm2 > Profile > Session > Status bar enabled

Select your widgets

Finished!

I hope this small tutorial will help you to improve your setup. It is obviously not complete but easy enough to move on.

Terminal Setup - Make your Windows terminal awesome

Anthony Lagrede — Fri, 07 Jan 2022 16:48:25 +0000

I recently discover Windows have an awesome fully customizable terminal even on Windows 10. Here I'll show you how to do the same for your computer.

The final result

This is the end result based on the beautiful Oh My Posh. Easy to configure and modify. Optimized to work as a developer.

Prerequisites

Install windows terminal

Install git bash

Verify the option Add Git Bash profile to Windows terminal is selected

Oh My Posh

Install the Meslo LGM NF fonts

In Windows Terminal open the configuration with CTRL + SHIFT + ,
Add the following conf to select font and adjust the transparency of the terminal

{
    "profiles":
    {
        "defaults":
        {
            "font":
            {
                "face": "MesloLGM NF",
                "fontSize": 10,
                "acrylicOpacity": 0.9,
                "useAcrylic": true
            }
        }
    }
}

Then Install Oh My Posh (Personally I had to install the direct binary on my old Windows)

Download the latest release of ohmyposh for your system (for me install-amd64.exe):
https://github.com/JanDeDobbeleer/oh-my-posh/releases/tag/v6.45.0

Define environment variables

In ~/.bashrc select the theme to use:

eval "$(oh-my-posh --init --shell bash --config ~/AppData/Local/Programs/oh-my-posh/themes/jandedobbeleer.omp.json)"

In Windows terminal preferences, select Git Bash as default terminal

This is my personal installation, I extracted the installation steps to show you how it is really simple. I recommend you to read the official documentation.

And voilà

I hope this small tutorial will help you to improve your Windows setup.

Meditee: A free Medium like Markdown editor app with DraftJS

Anthony Lagrede — Wed, 17 Nov 2021 08:36:57 +0000

Working on my favorite project Znote a Note-taking app and Javascript Lab, I am currently evaluating existing libraries offering a dedicated writing experience to improve my knowledge.

During this study, I rediscovered DraftJS an impressive WYSIWYG library backed by Facebook, for editing formatted text with high level features like undo/redo in addition to an extensible block mechanism.

In this rich and mature community, I also found other awesome projects and specifically Medium-draft, which is a beautiful Medium like rich text editor (built upon draft-js), eliminating mouse usage by adding relevant keyboard shortcuts.

These Markdown keyboard shortcuts are really pleasant to use and the integrated side buttons and toolbars are really well built.

Unfortunately, Draft.js doesn't natively Markdown and even if there are good initiatives, I didn't find a correct Draft/Markdown converter. So I decided to write my own Markdown converter. Moreover, it could be cool 😎 to use DraftJS to edit your Markdown files, right?

This is why I come up with a small fully-packaged Desktop application: Meditee

Meditee

Meditee is built on top of the Medium draft library and Electron with a custom Markdown two-way converter. This app is also Free and Open-source like all its underlying components.

This application is built with a relatively limited amount of code to let you understand how to interact with Draft and Markdown. It could be a source of inspiration for your future project.

You are free to use the prebuilt app or build it from source

Features 💡

Read/Write Markdown files
Support mapping of inline styles: Bold/Italic/Strike/Code
Support of block styles: Titles, Quotes, Break, List(OL/UL and TODOS)
Links and Images
Code block highlight with auto-detection language
Emoji support
Dirty flag when file is edited with a confirmation before to quit
A Dark theme

Roadmap 📚

DraftJS has various interesting plugins. I will be happy to know which plugins you are interested in.
I have already planned to integrate some features like:

Frontmatter
Mermaid

If you are interested in helping me, I will be happy to read your suggestions and Pull Requests: Discussions

For those who would like to see this kind of editor in Znote you can also reach me the Znote github to discuss.

Credits

Hope you will enjoy this small app: Meditee Github

Dev tool: A markdown and code editor inspired by Jupyter notebooks 💫

Anthony Lagrede — Mon, 06 Sep 2021 07:45:11 +0000

Today I'm pleased to announce the Znote 1.0 💫, a super versatile Markdown code editor! 🎉🎉

Shared with the Dev.to community in 2020, 🥰 the positive feedback I received since then motivates me to push forward (many thanks again 🙏). I'm coming after months of HARD WORK, with a robust version dedicated to all your daily code usage.

Reminder: What is Znote

Znote is a Markdown editor, designed to be your best companion 🫂 for prototyping and making scripts. The missing piece for JS developers in data exploration, offering a solid alternative to Jupyter in the Python ecosystem.

The approach

Promulgate an innovative and empirical approach that consists to write code and documentation in the same place. In this app, you can quickly play code block, exploiting results, and put around all the necessary information in Markdown.

Easier to read and share than a raw code script, you will take pleasure to organize and share your work.

I honestly love to use it. 🤗

What's new?

For this new version, I come with advanced features to cover intensive and professional usages. I use Znote advantageously as a replacement for various software such as SQL client, Postman or Notepad++, but also as a main tool to create and test Node scripts.

To correctly achieve this:

✓ I entirely reviewed the backend code and the UI to be more cleaner, usable and robust
✓ Add a dynamic customizable code completion
✓ Also, add Markdown shortcuts and completion
✓ A new Right context menu with commands to transform selected text (will be dynamic in the future)
✓ A builder to create shortcut functions callable in code
✓ Add the possibility to add and use external NPM packages
✓ Run code with an external Node installation
✓ Export code as scripts and Diagram as SVG
✓ Export the entire note as PDF, HTML...
✓ Add various Magic comments
✓ A new horizontal layout for the preview (useful for some code use cases like SQL)
✓ More themes to customize the app
✓ A more performant search box
✓ An internal database to optimize memory
And so many things...

ℹ I am also including in this list some features developed in the very latest preview versions

And it's really powerful...

Create easily an SQL client, Postman...

Add your NPM packages and create shortcut functions to create your perfect dedicated tool.

More themes are available to enhance the experience

And Now?

I now plan to integrate recipes to load via an open marketplace, to safely add useful functions and commands to Znote. I'm also investigating to add automatic Jobs, tabs, a valid EV certificate...

Because a software is never finished 😅, I also finally decided to introduce some paid features, like NPM packages (mainly to cover advanced use cases) to help me to push Znote even further. But it's still free for general use cases!

Thanks to this, I can offer you a more consistent Cloud space to save and share your works between all your devices.

Do you have any idea for me?

Leave me a comment below or contact me via the Github Discussions
Discover all features on the Znote website

❤️ I really enjoy sharing this app with you from the start, hope to see you soon in my newsletter to share tips and tutorials.

Hope you will continue enjoy using my app and it will make your job a little more fun.

Dev tool: A Markdown editor for developers 🔥

Anthony Lagrede — Tue, 11 May 2021 10:28:40 +0000

As developer you probably spend most of your time to learn and test things. Grab and test small pieces of code, read and write documentation, both for you or your teammates and eventually coding. 😋

Since years, I made a choice to use Markdown as primary format to taking notes and this for 2 reasons:

The markdown is portable, non vendor lock-in
It's perfect for writing code and documentation (code highlight, html conversion...)

I also decided last year to bring my contribution to the community by providing Znote. (self-promotion here) an electron cross-platform note-taking app offering a dedicated experience for developers.

Disclaimer: Even if the app is already available on all app stores and mobiles, Znote is still young with lot of improvements to do.

Furthermore, if as a software creator it's common to add new features, I'm really excited to share this particular one with you which completely changed my daily work.

The Lab 🧪

The Lab is a feature allowing to run JavaScript code directly in the note-taking app. You can use the Node fs API as well as the pre-included libraries to explore and visualize your data. ✨

Below are some examples:

Run plain Javascript

Read & Write file thanks to the Node FS API (it's an Electron App)

Explore Data with DanfoJs

Graph with https://plotly.com/javascript/

And generate diagrams with Mermaid

Are you interested in helping me?

Like I said above, even if the app is ready to use, my backlog is still enormous 📚.
I plan to integrate more libraries and build-in plugins to add shortcut functions. I will send tutorials, probably via my newsletter (link on the landing Lab page). Do you already have any suggestions for me? I will be happy to read them here or on my Github: landing page.

Hope you will enjoy using my app and it will make your job a little more fun.

Build a free blog/website with Github

Anthony Lagrede — Thu, 02 Jul 2020 12:55:36 +0000

Motivation

Own your blog can help you to develop your personal brand. Of course, It will never replace community blog platform like dev.to or medium but it makes it easier to post on more personal topics.

The provider jungle

There are a ton of providers which can help you to build your blog, but as developer I would point out the Github pages solution. A professional tool, which will allow you to evolve freely while keeping control over your posts. Moreover, because we are lazy we will choose a no code solution!

Markdown = Independence

Many blogging platforms use Markdown as their primary blog posting format. Writing your posts with Markdown is super easy and allows you to quickly move your posts and get away from html/css formatting issues.

Start to build

Go to this amazing Github project: Jekyll-now.
Jekyll is a static site generator ideal for GitHub hosted blogs.
Jekyll Now makes it easier to create your Jekyll blog, by eliminating the up front setup.

Fork the project
Update your repository name in settings
Activate the Github pages feature
Update the baseurl /blog in _config.yml

Wait a minute and visit: https://yourgithubusername.github.io/blog

Hack your blog

git clone https://github.com/YOURNAME/blog.git

Add your post in Markdown under the _posts folder with the name: YYYY-MM-DD-title.md

--------
layout: post
title: First demo blog post!
published: true
tags: demo markdown blog
--------

Next you can update your site name, avatar and other options using the _config.yml file in the root of your repository (shown below).

git add .
git commit -m"new blog post"
git push

Use a Markdown editor

Rather than install the whole development stack with Ruby, Bundler and jekyll, You can simply use a free desktop Markdown tool to write your post with a preview. I personally recommend znote a free Markdown editor with ideal interface to write offline posts. 😁

To conclude

This is a quick introduction to Github pages. Now, you know how to build and deploy your personal blob/website without paying a provider and maintaining a server. You can of course replace this blog by an HTML website or customize it with another theme.

Themes

https://jekyllthemes.io/
https://jekyllthemes.io/free
https://themeforest.net/tags/github%20pages
http://jekyllthemes.org/