DEV Community: Gilbert

why

Gilbert — Tue, 22 Apr 2025 16:20:12 +0000

Why I Decided to Offer a Free Version of My GreenOps Solution

Gilbert — Tue, 22 Apr 2025 13:58:46 +0000

Sustainability is the next challenge for IT teams: understand, anticipate and act on carbon footprint. But these KPIs are far from their day to day goals to get systems on-line and available for customers which matters for business.

When we first launched OxygenIT, our focus was crystal clear: build a GreenOps solution tailored for large enterprises. We knew these companies could benefit significantly from optimizing their cloud and datacenter usage—not just from a cost standpoint, but from a sustainability one as well.

But as we dug deeper into the day-to-day reality of IT teams, we realized something important: FinOps just wasn’t inspiring most people. Sure, saving costs is important for the business, but when your average engineer, DevOps contractor, or platform team member hears “save money for the boss,” it doesn’t exactly get them fired up.

Carbon, on the other hand, does

Reducing emissions is a goal that resonates across every level of an organization. It speaks to the shared values of our time—especially for the younger generation entering the workforce, who are not only asking for change, but expecting it. And they want to play a role.
That’s when we had our moment of clarity.

We realized that to truly drive behavioral change inside organizations, we needed to make carbon the new currency of IT performance. And that meant we had to go beyond the usual surface-level metrics.

We built OxygenIT to provide granular, real-time measurements of carbon impact across a wide spectrum of services—from traditional compute and storage to cloud-native architectures like containers, serverless functions, DbaaS, and beyond. No more static reports. No more abstract carbon calculators based on billing data. Real-time. Actionable. Comprehensive. And then came the market reality.

Two painful truths became clear:

The default reaction from IT leaders was: “Oh, another carbon calculator. You probably just pull in billing data or use some public reports from cloud providers.”

Many companies had already “checked the GreenOps box”—a small consulting gig here, an open-source script from 2020 there—but results were marginal, visibility was low, and business impact was unclear.

That’s when we realized the real challenge wasn’t technical. It was awareness. CIOs and CTOs knew they had to do something, but few truly understood the business case behind GreenOps. Fewer still had seen solutions capable of delivering real-time, actionable insights relevant to all tiers of their organization.

We needed to change that, that’s why I decided to go free.

By offering a free version of OxygenIT, anyone—from an IT sustainability lead in a Fortune 500, to a platform engineer in a fast-scaling startup, or even an independent techie passionate about climate—can get started in minutes. Connect to your cloud tenant of choice. See the data. Explore the impact. Reframe the conversation.

I’m convinced that radical transparency and accessibility are what this space needs. Especially today, when we’re all questioning our digital sovereignty and dependence on US cloud providers. GreenOps is not just about emissions—it’s about control, intelligence, and relevance.

So yes, we’re giving it away. Not because we’re naïve. But because we believe that once you see what’s possible, you’ll want more. And that’s when the real journey starts.

We are making GreenOps a leverage for IT efficiency and value.

Start free

Want to start? It’s free

If you’re curious to try it out, the free version of OxygenIT is live and ready. No sales call, no credit card. Just click, connect, and explore. Have a look to https://console.oxygenit.io/auth/start-free.

Develop your Vue.js app faster with this MEVN template

Gilbert — Thu, 17 Jun 2021 13:12:45 +0000

Coding in Full Stack seems cool, but that requires a lot. For instance, just setting up tools, frameworks, and database tiers already takes you hours.

We know it’s painful to wait while you’re excited with your new ideas 😉 That is why we came up with MERN and MEAN templates to help you start your projects in no time, with a less and simple configuration.

And today, regarding some of your request, we would love to bring you another template for the MEVN stack 😉 Quite similar to the other two templates, you can shift your focus on MongoDB, Vue.js, and Node.js only as Express.js is managed automatically by magic 🤯

Clone it right here 👉 MEVN ready-to-deploy template

Now let’s get to know how the template can help you!

A faster and effortless way to code in MEVN 🤯

Basically, how this MEVN template works is exactly similar to the MERN and MEAN templates that we have just published recently. However, for anyone who doesn’t have any idea about it yet, here’re some key points for you.

This MEVN template is configured for the ScaleDynamics Cloud Platform, which provides not just everything you need to code in Full Stack but even more:

One command to develop with live-reload
Another one to deploy, make your app/service available on a URL
No Express.js layers management, the platform takes care of them automatically
No HTTP/JSON coding, as our compiler automatically generates its stubs required to call a Node.js function using JS objects.

You will need a ScaleDynamics platform account to deploy your project. Take 1 minute and create your FREE Community account
right here.

Get the template ready in no time 🚀

clone the template here:

git clone https://github.com/ScaleDynamics/vue-mongodb-template.git

You can find 2 principal parts in this project:

The frontend, a vue-app web template created with vue-cli. To update it, open the src folder where you can add, modify or delete components.
The backend contains a node module and a MongoDB module. You can update the frontend/backend as you need to build your own app.

To start developing with the template, go in vue-app folder and run those commands below:

Install easily

npm install

To log in to the ScaleDynamics Platform

npx warp login

Develop both front & backend with live-reload

Use the command below to enter a live-reload development session:

npm run serve

You can always update the frontend or the backend code, it will be rebuilt at each modification.

Please note that you’ll need to select an existing project or create a new one as you want before running this command. On the ScaleDynamics platform, a project identifies an application or a microservice. For more details on projects, see the documentation.

Deploy dynamically

Now, to deploy, you will need to compile and minimize your project for production:

npm run build

Then use the simple deploy command

npm run deploy

You will have to select or create an environment that identifies the cloud execution environment to run your app. You can create as many as you want, each environment has its own URL.
For more details, check out the documentation.

Configure MongoDB driver

In terms of MongoDB, you already have a template module in the src/mongodb.js. Replace the URI constant to use your own MongoDB instance:

const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';

You’re all set, start your MEVN project now!

Functions in ScaleDynamics Platform

With the ScaleDynamics Platform, new functions can be called by the frontend. Add them in index.js or into another module and export them. The platform manages the Express.js layers automatically.

const myFunction = () => {
  // your code here
}

module.exports = { myFunction };

To access your new functions on the frontend side, adapt this code:

import * as Backend from './.backend/hello.js';

const { myFunction } = new Backend();

Other info

And that’s it! Hope you find it helpful and if you need more information, check out these documentations:

We are always here if you have any questions or feedback!

Cheers!

Build your MEAN project with automatic Express.js management

Gilbert — Fri, 11 Jun 2021 12:20:34 +0000

Hi there, some of you guys might already know that we built a MERN stack template earlier that helps you skip Express.js.

Regarding some of your requests, we would like to bring you a new open-source template. And this time, it is for MEAN stack 😉

And you know what, you can still develop both front & backend with live-reload and deploy with a simple command-line while the Express.js part is managed 100% automatically, isn’t that great? 🤯

Clone it right here 👉 MEAN ready-to-deploy template

Now let’s get to know how the template can help you!

A MEAN stack but you only code MAN 🤯

Besides the MERN stack that stands for MongoDB, Express, React and Node.js, we still have the MEAN stack for people who use Angular instead of React. It is also considered as a quite popular one for Full Stack JavaScript developers.

Quite similar to the MERN template, this MEAN template is also configured specifically for the ScaleDynamics cloud platform on MIT license. It offers all you need to start developing your MEAN based apps/services:

One command to develop with live-reload
Another one to deploy, make your app/service available on a URL
No Express.js layers management, the platform takes care of them automatically
No HTTP/JSON coding as our compiler automatically generates its stubs required to call a Node.js function using JS objects.

When it comes to deployment, you will need a ScaleDynamics account, you can create your FREE Community account right here).

How to use the template

First of all, clone the template by:

git clone https://github.com/ScaleDynamics/angular-mongodb-template.git

Then you’ll have both frontend and backend template ready:

On the frontend, you’ll have a angular-app web template app created with angular-cli. To update it, open the src folder where you can add, modify or delete components.
The backend contains a node module and a MongoDB module. You can update the frontend/backend as you need to build your own app.

To start developing with the template, go in frontend/angular-app folder and run those commands below:

Install the project

npm install

Log in to the ScaleDynamics Platform

npx warp login

Develop with live-reload

Start a live-reload development session by using this command.

npm run start

You can always update the frontend or the backend code, it will be rebuilt at each modification.

Deploy with ScaleDynamics

When it comes to deployment, you’ll need to compile and minimize your project for production by using:

npm run build

Then the deploy command

npm run deploy

Now, beside selecting a project, you’ll also have to select or create an environment which identifies the cloud execution environment to run your app. You can create as many as you want like ‘staging’, ‘demo’, ‘prod’... Each environment has its own URL.

For more details on projects or environments, see the documentation.

Configure MongoDB driver

In src/mongodb.js. There is a template module that you can replace its URI constant with your own.

const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';

You’re all set!

Creating new functions

With ScaleDynamics Platform, new functions can be called by the frontend. Add them in index.js or into another module and export it. The platform manages the Express.js layers automatically.

const myFunction = () => {
  // your code here
}

module.exports = { myFunction };

To access your new functions on the frontend side, adapt this code:

import * as Backend from './.backend/hello.js';

const { myFunction } = new Backend();

Other info

And that’s it! If you need more information, check out these documentations:

We hope you liked it, please let us know if you have any questions or feedback!
Stay tuned for the Vue.js template coming up! you can subscribe, or follow us on Twitter, Facebook and even Instagram for more updates!
Cheers!

MERN ready-to-deploy template, to skip Express.js

Gilbert — Tue, 11 May 2021 15:28:26 +0000

At ScaleDynamics we have one recurrent passion: to make web developers’ life easier 🙈.

BAM! And we strike again! We built a fully open source MERN template ready to use for our platform.

One command to develop with frontend and backend live reload...
One command to deploy on the cloud...

Let’s get started!

It is located here (https://github.com/ScaleDynamics/react-mongodb-template) - use it as you wish and start coding your projects with it! We hope you’ll find it helpful! 🤗

A MERN template with a fully managed Express

Quick reminder — MERN stands for MongoDB, Express, React and Node.js, and is one of the several variations of the MEAN stack (MongoDB, Express, Angular, Node.js). It is one of the standard “Full Stack” stack for JavaScript developers.
This template is configured for the ScaleDynamics web platform. It is on MIT license and ready to be used to build your own MERN based apps/services!
Everything is preconfigured: we provide one command to develop with live reload (frontend and backend) and one to deploy to make it live on a URL.
One particularity of our platform is that you don’t have to manage the Express.js layers, the platform manages them for you automatically, so you can focus only on the MongoDB/Node/React coding.
You can stop coding HTTP/JSON as it is now automatic, thanks to our compiler. It generates the HTTP/JSON stubs required to call a Node.js function using JS objects.
Please note that you need a ScaleDynamics platform account only to deploy your project, you can create your FREE Community account right here).

Diving into the template

To start using the MERN template you can clone it:

git clone https://github.com/ScaleDynamics/react-mongodb-template.git

This project is divided in two parts:

the frontend, where you can find a react-app web template app (located in the frontend/react-app folder). It has been created with create-react-app. To update it, open the src folder where you can add, modify or delete components.
the backend contains a hello node module and a MongoDB module. You can update the frontend/backend as you need to build your own app.

To start developing with the template, go in frontend/react-app folder and run those commands:

To set up the project

npm install

To log onto the ScaleDynamics Platform

Then use your ScaleDynamics account credential to log onto the platform (feel free to create a free community account here)

npx warp login

Develop with live-reload

To enter a live-reload development session, use the command below. Feel free to update the frontend or the backend code, it will be rebuilt at each change.

npm run start

Please note that when running this command, you have to select a project. On the ScaleDynamics platform, a project identifies an application or a microservice. Select an existing project or create a new one.
For more details on projects, see the documentation.

Deploying with ScaleDynamics

To deploy your project you’ll have first to compile and minify your project for production.

npm run build

Then use the deploy command

npm run deploy

Note that when running this command, you have to select a project and an environment. On the ScaleDynamics platform a project identifies an application or a microservice.

Select an existing project or create a new one. An environment identifies the cloud execution environment to run your app. You can create as many as you want like ‘staging’, ‘demo’, ‘prod’... Each environment has its own URL.

To deploy, select an existing environment or create a new one. For more details on projects or environments, see the documentation.

Configure MongoDB driver

Regarding MongoDB, we provide a template module in the src/mongodb.js. To use your own MongoDB instance, replace the URI constant by your own.

const URI = 'mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]';

You’re all set!

Creating new functions

You can create new functions that can be called by the frontend. Add them in index.js or into another module and export it. The platform manages the Express.js layers automatically.

const myFunction = () => {
  // your code here
}

module.exports = { myFunction };

To access your new functions on the frontend side, feel free to adapt this code:

import * as Backend from './.backend/hello.js';

const { myFunction } = new Backend();

Other info

And that’s it! If you need more information, you can refer to the documentation:

We hope you liked it, please let us know if you have any questions or feedback!
We have more template variations coming up for React, so you can subscribe, or follow us on Twitter, Facebook and even Instagram if you wish!

Discover the 1st Full stack playground, in early access

Gilbert — Fri, 22 Jan 2021 14:00:34 +0000

TL;DR

For those that are following me, they already know that.

This is the first playground that allows coding directly in the browser for both front-end JavaScript and back-end Node.js. It renders a preview to see the results in real time. Full Stack developers can show their work, build test cases, learn and find inspiration. Teams can build their snippet database and share knowledge or best practices.

You can test right away JavaScript Full Stack Playground and let me know what you think about it.

In this post, I would like to announce that the Full Stack playground is now accessible in early access on invitation for developers who want to contribute to our snippets public database (feel free to request for an invitation).

Designed for the web developers & Node.js community!

When I designed the playground I had in mind to provide a new tool for web developers, Node.js and JavaScript developers. This is why the playground is dedicated to HTML, CSS, JavaScript and a Node.js backend.

For developers, it’s a perfect tool to:

Learn, discover, or become a Full Stack - By default, all snippets are public. Access to the core code: MongoDB queries, proxy, authentication, REST APIs... Explore all the backend possibilities and discover new things ;
Share your work - Whether you want to brag with your last piece of code, or show a prototype to your boss, just share your snippet with the editor or deploy on a custom domain to make it live to the world ;
Prototype and test - Try and fail with your code, for both front and back ends. Test an isolated piece of your project code. Prototype new ideas quickly without installing anything ;

Features

Let me describe the current features of the playground

For the editor

Edition of the frontend HTML, CSS and JavaScript files
Edition of a Node.js module with npm module dependencies -Create and tag your own snippets
Edition of a Readme markdown file to describe snippet details
Change editor layout as you want

For the snippet management

Create new snippet, Save, Fork or Delete a snippet
Access Snippet list with basic search
Share the snippet or search options using the URL
Create public or private snippets

For the Preview

Instant run of the Node.js module on a public cloud
Preview of the Frontend and Backend in real-time
Access to Frontend and Node.js backend console logs

I also plan to add new features soon, such as a ‘Deploy’ button to make live the snippet on a URL, adding Custom domain support. Also, I’ll add extend the snippet sharing feature. For now, a private snippet can only be viewed by its owner. Having a way to share a private snippet with several users seems to be a cool upgrade.

Help me build the community

I want the Full Stack playground to remain FREE for public code snippets.
I need your help to communicate around it to get more visitors, so I can find some advertisement sponsoring to maintain a free version for all. You can help us by sharing the playground in your social networks or friends.
Also, feel free to provide me feedback, so I can improve it!

Building the “React Hover cards with a REST API” snippet on the JavaScript Full Stack Playground

Gilbert — Wed, 16 Dec 2020 15:24:08 +0000

Update 22th of January 2021:
The Full Stack Playground is now available in early access!
You can read the detailed features on my last article

TL;DR

For those that are following me, they already know that I built the 1st JavaScript Full Stack Playground.
In this new post, I wanted to share some details on how I built the snippet named “React Hover cards with a REST API” that you can access on the playground here.
I will show you how to fetch some data using a REST API, with a “proxy” that sends back to the front end only data required to render the page.
Tag along if you’re interested!

About the snippet

The snippet named React Hover cards with a REST API shows user cards with a hover effect. It is based on a user database coming from a REST API used on the backend, in this case jsonplaceholder.typicode.com/users.

This API returns a lot of data about every user, but obviously we don’t need them all, and we want to filter the results to send only the data required to render the page. This is generally called a proxy.

Let’s start coding!

Our proxy back end defines a fetchData function that will fetch the REST API call (I’m using Axios in this case). It will then filter the data using a filter function, to send the selected information to the front end.
So here’s the back end code:

const axios = require("axios")

exports.fetchData = async () => {
   const { data } = await axios.get("https://jsonplaceholder.typicode.com/users")
   filter(data)
   return data
}

Let’s dig in the filter function. The API returns these data for each user (you can use a console.log right after the axios call on the backend side to dump them if you want).

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "Sincere@april.biz",
   "address": {
       "street": "Kulas Light",
       "suite": "Apt. 556",
       "city": "Gwenborough",
       "zipcode": "92998-3874",
       "geo": {
           "lat": "-37.3159",
           "lng": "81.1496"
       }
   },
   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
       "name": "Romaguera-Crona",
       "catchPhrase": "Multi-layered client-server neural-net",
       "bs": "harness real-time e-markets"
   }
}

On the front end side, only these ones are required:

{
     "id": 1,
     "name": "Leanne Graham",
     "username": "Bret",
     "email": "Sincere@april.biz",
     "phone": "1-770-736-8031 x56442",
     "website": "hildegard.org",
     "company": {
       "name": "Romaguera-Crona" }
}

So, let’s do a filter function to remove unused fields!

function filter(data) {
   data.forEach(element => {
       delete element.address
       delete element.company.catchPhrase
       delete element.company.bs
   })
}
exports.fetchData = async () => {
   const { data } = await axios.get("https://jsonplaceholder.typicode.com/users")
   filter(data)
   return data
}

And here you go, you just created a first proxy back end 👏!
At last, we’re now ready to call the back end from the front end. To get the back end, call it and enter react to render the user cards:

// Get the backend
const { fetchData } = new Warp()
// Call it then render hover cards
fetchData().then((data) => {
   mockData = data
   render(React.createElement(App, null), appNode)
})

Feel free to adapt the code to your needs. Thanks! 🤗

How I created the 1st Full Stack playground - now in early access

Gilbert — Fri, 11 Dec 2020 13:07:37 +0000

Update 22th of January 2021:
The Full Stack Playground is now available in early access!
You can read the detailed features on my last article

TL;DR

My name is Gilbert, I’m an engineer for +30 years (and CEO for +10 years). I designed a technology called WarpJS to integrate JavaScript Front end & Back end, and I wanted people to be able to try it without installing anything… so I developed an online JavaScript editor with WarpJS, and I ended up creating the first real time JavaScript Full Stack playground!

This is the story of its creation. Hope you’ll find it interesting and inspiring.
You can test right away the live demo of the JavaScript Full Stack Playground and let me know what you think about it.

Existing in-browser code sandbox: front end only!

When creating a website, you generally have to code a front end & a back end connected and working with one other.

For the front end, I often used developers sandbox to get code snippets that I adapted to the UI of the website. It’s really cool and it makes coding so much easier. As the web dev community is so rich, you basically can find anything you’re looking for!
Though, for the back end, it’s really another story! Blog posts articles, getting started guides, GitHub projects… is your new credo 😨.

And that’s only to select the right back end stack for your project! That’s why I thought it would be so much more efficient to have a back end playground. It would show you examples and code snippets to get to throw a quick prototype.
I could have created a back end only playground, but I thought it would not be as effective. Also, my team and I created a technology called WarpJS. It integrates JavaScript Front and Back ends, so I wanted developers to be able to test it without having to install anything. That’s why I decided to build a front end AND back end playground, to code them at the same time, and to see the results in real time.

So let’s get started.

Design

I’ve chosen to focus only on web development languages: HTML, CSS, JavaScript for the front end, and Node.js for the back end.

Here’s what we get: the development environment is composed of the front end, back end editor panels, sitting side-by-side to code faster. I’ve also added a preview window on the right side to see the rendered page in real time.

On the left side, I wanted a code snippet search area, so developers can search in the code snippet database. I really wanted everything to be in a single page, so developers can create new snippets, and explore available ones quickly.

I made every window adjustable, so you can customize your experience as you wish: resize any panel, allow full screen view… It’s handy to focus on some codes, or to make sure web components are responsive…

A playground with a unique recipe

There’s a catch, right? How can we write a back end and use it in the front end without creating endpoints, routing for APIs and HTTP requests? The secret recipe is the technology I mentioned above, WarpJS, which I wanted people to be able to test really easily. It automatically transforms an exported function of a Node.js module into an HTTP server API. On the client side, you no longer need to use HTTP to call the back end module, it just basically calls its functions.

So this means that, in the back end, you just need to create functions and to export them. In the front end, you just call it.
As you avoid writing HTTP layers, this playground offers you more time to only focus on the core logic of the snippet. It enables any JavaScript developer, even junior one, to use it easily! You no longer need to be an HTTP expert to work as a Full Stack 😬! Icing on the cake, the Playground is connected with the ScaleDynamics Virtual Cloud, which means it also takes care of deployment processes: you can deploy and run on any cloud.

Building

To lay the first stone, I chose GoldenLayout as window layout management. For the editors’ views, I selected the Monaco code editor that powers Visual Studio Code. It takes care of error detection, auto identification, code completion…

The preview is an iframe to inject code snippets, which are stored in a MongoDB database, and to provide a live-reload feature for the preview window.

For the search area, I choose to made it pretty simple: instead of being classified by categories, I choose to sort them with hashtags (for instance #react, #fauna, #AI and so on). Developers can add title and a 250 characters description.

The back-end panel is connected to the ScaleDynamics code-to-cloud Suite to redeploy instantly and to support the full stack live-reload.

Finally, I’ve naturally coded the whole playground back end with WarpJS itself: I’ve got my first fully functional prototype within two days 😎.

The result: a JavaScript Full Stack Playground

It’s live! You can test right the JavaScript Full Stack Playground.
Feedbacks are much appreciated so I can improve it!

📖 New article on Building the “React Hover cards with a REST API” snippet on the JavaScript Full Stack Playground 📖

You can read it here