Animé par : Horacio GONZALEZ
Avec la participation de :
- Matthieu VINCENT
- Yannick GUERN
- Yohann VINEZ

Episode enregistré le 15 septembre 2025

Chapitrage et Liens

00:00:16 - Présentation des invités

00:03:05 - IA opensource suisse 
https://www.swiss-ai.org/apertus 

00:08:30 -Connaissez-vous le vishing ? 
https://www.darkreading.com/cyberattacks-data-breaches/cisco-user-data-stolen-vishing-attack 
https://www.lemondeinformatique.fr/actualites/lire-cisco-et-google-pris-dans-la-nasse-du-vishing-97602.html 
https://cloud.google.com/blog/topics/threat-intelligence/voice-phishing-data-extortion?rev=7194ef805fa2d04b0f7e8c9521f97343&hl=en

00:13:20 - Une autre attaque supply-chain sur NPM… again and again
https://www.aikido.dev/blog/npm-debug-and-chalk-packages-compromised 
https://www.bleepingcomputer.com/news/security/hackers-hijack-npm-packages-with-2-billion-weekly-downloads-in-supply-chain-attack/ 

00:20:40 - You no longer need JavaScript  
https://lyra.horse/blog/2025/08/you-dont-need-js/

00:24:20 - Liquid Glass in the Browser: Refraction with CSS and SVG 
https://kube.io/blog/liquid-glass-css-svg/ 
https://www.bouletcorp.com/rogatons/2023/01/12 

00:29:25 - Les lecteurs d’écran ne restituent pas le (vrai) gras et italique (strong, em, b, i) des textes 
https://www.lalutineduweb.fr/lecteurs-ecran-restitution-gras-italique/ 

00:34:55 - Leak du grand firewall chinois
https://korben.info/great-firewall-chinois-vient-prendre-500.html
Analysis of the GFW's Unconditional Port 443 Block on August 20, 2025   

00:39:20 -Liens utiles
https://free-for.dev/#/ : tous les outils gratuits (ou partiellement) pour les devs
https://it-tools.tech/ : des outils gratuits online (validation de token, convertisseurs, …)

00:41:24 - Mission de contrôle sénatorial sur l’IA, orientée autour de la création 
https://www.senat.fr/notice-rapport/2024/r24-842-notice.html

00:43:55 - Storybook 10 is ESM-only 
https://bsky.app/profile/storybook.js.org/post/3lyg2yggxrk2b 

00:46:45
 - Mes p’tit side projects du moment (Mat) : 
https://github.com/yodamad/heimdall 
https://gitlab.com/fun_with/fun-with-gitlab/global-monitoring 

00:50:20 - Jujutsu  
https://github.com/jj-vcs/jj

00:55:37 - Musique de fin – OST Hollow Knight: Silksong
https://www.youtube.com/watch?v=Q6is6K8jbho

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

git init
npm init

wget https://github.com/denoland/deno/releases/download/$DENO_VERSION/deno-x86_64-unknown-linux-gnu.zip
unzip deno-x86_64-unknown-linux-gnu.zip

chmod +x installdeno.sh

clever create --type node myDenoApplication

clever env set CC_PRE_BUILD_HOOK ./installdeno.sh
clever env set DENO_VERSION v1.0.0 

import { Application } from "https://deno.land/x/abc/mod.ts";

const app = new Application();

app
  .get("/", (c) => {
    return "Hello, Abc!";
  })
  .start({ port: 8080 });

{
  "name": "abc-test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start":"./deno run --allow-net abc.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

git add abc.js installdeno.sh package.json
clever deploy

• environment variables injection
• monitoring & alerting (auto restart)
• zero downtime deployments
• metrics (data & charts)
• live logs
• automatic scalability

You may have noticed major updates on the Clever Cloud Console these last weeks. Along with the quick search feature, keyboard shortcuts and a new UI, we introduced the use of service workers to reduce the load time of the Console.

Service workers you said? Surely you mean Web Workers, right?

No! Service workers are scripts which are run by your browser, in the background. They are completely separated from the web pages of your site and have multiple uses. You can use them for HTTPS proxying, push notifications, or even background syncing.

Today, we will cover HTTPS proxying.

The Console should load faster

When you load the Clever Cloud Console, we need to fetch data (the user, its organisations / apps / addons…) to bootstrap the whole application. If you have a lot of applications / belong to a lot of organisations, this may take a while, up to several seconds ("a lot" can mean ~200 apps for some of ourusers). This data isn't updated a lot. Most of our customers are using the Console to look at the logs or configure their applications. So it needs to be fast for them to access / set the information they want.

Here come the service workers. They can cache the response of any HTTPS request that is emitted from your application (which can be used to build offline apps). What we did is that any huge XHR request done when the Console is loading is now served from the cache if it exists.

How does it work?

• These new APIs (Service Workers, Cache API, Fetch API) are heavily using ES6 Promises, you should be familiar with them
• Incidentally, you can use ES6 because browsers that support service-workers are also implementing mainstream ES6 features
• You need to use a recent browser: Chrome 42+, Firefox 44+
• Service Workers are HTTPS only, they won't work on HTTP requests. Chrome will allow http://localhost as a secure origin though.

How to debug

• You can check "Enable Service Workers over HTTP (when toolbox is open)" on Firefox Devtools to use service workers on any HTTP request.
• Chrome will only allow localhost or HTTPS urls. Good thing that HTTPS is available on *.cleverapps.io.
• Firefox and Chrome have an endpoint to list service workers: Firefox: about:serviceworkers, Chrome: chrome://inspect/#service-workers
• You can use regular console.log() to log from the service worker.
• You won't be able to see intercepted requests in the Network panel of Firefox (as of Firefox 45.0a1).

The code

First, we need to setup our service worker and ask the browser to register it (in your existing javascript application):

  navigator
    .serviceWorker
    .register('/service-worker.js')
    .then(navigator.serviceWorker.ready)
    .then(registration => {
      console.log('Server worker has been registered');
    });

You don't have to worry about multiple registrations: if a service worker has already been registered, the browser will simply ignore it.

Once this is done, we have to create a service-worker.js file. Service Workers are event based. Two events will be useful in our case: install and fetch. install will allow us to initialize our service worker (like pre-caching assets we haven't already loaded). fetch will be triggered each time a request is intercepted for the current scope.

We will use the Cache API to cache requests / responses.

'use strict';

const CACHE_URLS = [
  "/img/img1.png",
  "/img/img2.png",
  "/users/me"
];

const CACHE_NAME = "cc-cache-test";

self.addEventListener('install', event => {
  event.waitUntil(
    caches
      .open(CACHE_NAME)
      .then(cache =>{
        cache.addAll(CACHE_URLS);
      })
      .catch(e => console.error("Couldn't install the service worker, reason:", e));
  );
});

self.addEventListener("fetch", event => {});

Here, during the installation step, the service worker will download and cache the CACHE_URLS urls even before the user requests them. Now, we need to tell our SW to use the cache whenever we have a cached version of the request or to fetch it if we don't. We can use the great HTML5 Fetch API:

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.open(CACHE_NAME)
      .then(cache => cache.match(event.request))
      .then(response => {
        if(response){
          return Promise.resolve(response);
        } else{
          return fetch(event.request).then(res => {
            if(res && res.status === 200){
              caches.open(CACHE_NAME)
                .then(cache => {
                  cache.put(event.request, res);
                });
            }
            return res.clone();
          });
        }
      })
  );
});

What we are doing is to open the cache and then try to match the current request. If we have a match, we return the response associated to the request. If we don't, we fetch the request, check its response code and save it into the cache if it succeeded. Next time, it will load faster!

Note that we have to use res.clone();. This is because the response is a stream which can be read only once. Here, we want to store its data into the cache AND return the same data to the browser. This won't work unless we .clone() it first.

Now, our service worker is ready to be used.

Sounds perfect but…

A major drawback is that you need a quite recent browser and these API may differ between browsers. At the time of writing, this won't work on Safari (any version), Firefox stable (aurora/dev has some support), Opera, Internet Explorer (Edge does support some features). You will have to handle these incompatibilities yourself.

But, even if service workers are not yet supported by all browsers, your application will still be able to run in a normal way. Only proxying and cache features will be affected, requests will be done as they were before. This is completely backwards compatible.

How do we use it at Clever Cloud

We can't store all of the data or cache invalidation will be a mess to handle. Instead, we only store a few defined requests. When we load the Console, we use the cache, then wipe and update it in the background. The user can use the Console with quite fresh data and the UI will be updated as soon as we have the new one.

This feature allowed us to speed up the initial load of the Console, going well under 1 second if the cache exists. In a near future, we could also use service workers with the Notifications API to display application deployments's state even when the Console is not open in your browser.

More reading

To learn about service workers, I used a few links:

• Service Workers
• Cache API
• ES6 Promises
• HTML5 rocks (may be a little out of date but still accurate and well explained)

Lately, a lot of developpers asked us about Meteorjs support on Clever Cloud. This is indeed a growing technology out there, so I decided to test it myself.

What is Meteorjs ?

Meteor.js is based on Nodejs and is a real-time cross-platform web application framework (Web, Android and iOS). One of its main features is to automatically propagate data changes to clients in real-time or even query the database from the client (well, the client has a cache of the database which will update the remote one). It is an easy framework to build reactive applications

How to deploy on Clever Cloud

As an example of a large Meteor application, I will use TelescopeJS. It's a social news application you can configure the way you want. I'll use the version v0.14.2 since it does not require MongoDB 3.0. This is a version we will provide in a near future.

1- Clone

So first, git clone https://github.com/TelescopeJS/Telescope && cd Telescope && git checkout v0.14.2 and run it: meteor run. Then open http://localhost:3000, you should see the default page with some examples.

2- Install and build

To make it run on Clever Cloud, we have to make our own install script. This script will run when you deploy your application and build what's needed. Create an install.sh file and paste the following lines (or download it from Github):

#! /bin/bash

# Current path
currentPath=$(realpath ./)

# Install Meteorjs
curl https://install.meteor.com/ | sh
export PATH=/home/bas/.meteor:$PATH

# Install demeteorizer
cd ~/ && npm install demeteorizer

# Go back to our project
cd "$currentPath"

# Note: When using "meteorhacks:npm"
# to prevent the error: "unknown package: npm-container"
# (described in https://github.com/meteorhacks/npm/issues/49)
# uncomment the two following lines:
#meteor remove npm-container
#meteor run

# demeteorize the app
~/node_modules/.bin/demeteorizer -a "my_app" -o my_app/

# Go inside our demeteorized app to install modules
cd my_app/

# Install modules
npm install

This script will install Meteorjs on our platform, demeteorize the app (i.e. convert it as a regular node.js application) and install its modules. If you are using the package npm-container from meteorhacks, you HAVE to uncomment lines 20 and 21 (this is not our case here). Do not forget to do a chmod +x install.sh to give it execution rights.

Now we have to create our package.json (which is the file which describe your application for NPM): npm init. Open it and create a scripts section:

"scripts":{
  "install": "./install.sh",
  "start": "node my_app/main.js"
}

(my_app/main.js is a file generated by demeteorizer, do not modify this line)

Then, you can commit your changes: git add package.json install.sh && git commit -m "Clever Cloud setup"

Configuration

Once done, we need to create a Node.js application and a MongoDB addon and configure it. Open the dashboard and:

Addon

• Add an addon
• Select MongoDB, choose your plan and name it.
• Click it in the blue pane on your left, go into its configuration tab and copy somewhere the Connection URI field

Application

• Add an application
• Choose node.js for the language
• Choose the scalers you want (the default configuration is enough most of the time)
• Name it
• We don't need an addon since we've just created it
• Environment variables: You have to create 2 of them: ROOT_URL (url of you application) and MONGO_URL (the Connection URI field you saved)
• Follow instructions to add the remote repository, git push and it will deploy.

Your application should now be deployed, feel free to contact our support if you have any troubles!

It has already started by trainings sessions today and tomorrow and the speakers will burst in on the scene next wednesday and thursday.

If you are looking at going to QCON London, you can save £100 using the code “ADAM100”.

See ya!

French version:

Clever Cloud à la QCON LONDON

Quentin ADAM, CEO de Clever Cloud, sera à la QCON London jeudi prochain, le 7 mars pour parler de JavaScript comme langage de traitement de données et d’intégration HTML5. Pour rappel, la QCON London 2013 est la septième édition de cet évènement annuel dédié aux développeurs, à l’architecture logicielle et au management de projet.

L’event a déjà débuté par les séances de trainings aujourd’hui et demain alors que les conférences débuteront à partir de mercredi.

Si vous souhaitez vous y rendre, vous pouvez utiliser le coupon “ADAM100” pour économiser £100 sur le billet d’entrée.

See ya!