We are building a proof of concept to port our web app, DeckDeckGo, to the Internet Computer of the DFINITY foundation.

Our project’s first milestone is not yet completely reached but, I managed to successfully deploy our editor.

Here are the few things I learned along the way. Hopefully it will help you get started too.

Introduction

For our project I chose the path to set up everything by my own, using the DFINITY SDK and tools. The following information, notably these regarding cost and deployment, are linked to such approach.

If you are looking to ease the process of web-hosting…

Exciting news, we received a 25k USD grant from the DFINITY foundation to port our web editor for slides, DeckDeckGo, to the Internet Computer.

In the coming weeks we will build a proof of concept to validate the feasibility of the project. Here are some insights about the scope, goal and milestones of this inspiring project.

DeckDeckGo

DeckDeckGo is a web open source editor for slides. Unlike other tools, presentations can be published and viewed online or shared as Progressive Web Apps (PWA). The editor works on all devices (laptop, mobile, etc.), …

For the second year in a row, I ran some polls on Twitter about the relationship between developers and Progressive Web Apps.

Are PWA preached or adopted by developers? Do they use these on mobile and desktop? Do they develop these even if their support on iOS is not optimal? Do they think Apple will ever implement Web Push Notifications?

Here are some interesting facts and figures resulting of the new edition of my surveys.

Limitation

I am not a statistician nor an expert in the redaction and interpretation of polls. …

Using CSS variables, at least when I’m writing these lines in June 2021, is not supported in media queries or selector, e.g. :nth-child(var(--my-variable)) does not work.

This is a bit unfortunate but, not unsolvable. In some recent development I bypassed this limitation by injecting style elements in the DOM, into my Web Components, in order to animate block of codes in DeckDeckGo.

Introduction

Stricto sensu the following trick is not reserve to Web Components and, probably works with any elements too. I just only used it so far with such technology 😜.

I will first display the idea with the…

I recently developed plugins and, migrated all the utilities of DeckDeckGo to build these with esbuild.

If you are looking to do the same, hope this tutorial helps you get started!

Introduction

esbuild is “an extremely fast JavaScript bundler” made by Evan Wallace. It is its tagline and, according my tests, the least we can say is that it is true. It is blazing fast ⚡️.

Sometimes while migrating my libraries, I even found myself waiting for the end of a build because I did not notice that it was already finished. …

An introduction to the MutationObserver Web API that provides the ability to watch for changes being made to the document.

I recently developed multiple features across projects with the help of the MutationObserver Web API. A bit to my surprise, I noticed that some colleagues never had used it or, even heard about it before. That’s why I got the idea for this blog post.

Introduction

The MutationObserver interface provides the ability to watch for changes being made the DOM tree (source MDN Web Docs).

It is a web feature, natively implemented in all browsers (yes even Internet Explorer v11 according…

I just migrated the documentation of DeckDeckGo to StorybookJS. More than its ability to simplify building and testing, I like to use it for documentation purpose because it allows me to integrate the README.md files that StencilJS generates automatically. Sparring steps between code and documentation is the best don’t you think?

Here are a couple of tips & tricks I reused, or discovered, along the process.

Import Markdown Files Into StorybookJS

One particularly cool feature of StencilJS is that, out of the box, it auto-generates readme.md files in markdown from the code’s comments. Isn’t that neat?

I think it is. Therefore, to even push to…

I recently published a new open source plugin to export Figma frames to DeckDeckGo slides.

As I like to benefit from my experiences to learn and try new concept, instead of using a bundler as described in the Figma documentation, I decided to give a try to esbuild.

The least I can say, I loved it ❤️.

Foreword

Following solution is the one I set up for my plugin. It does work like a charm but, notably because it was the first time I used esbuild, it might need some improvements. …