The singleton and factory design pattern, implemented with TypeScript. Explained with a hairdresser and an ice creams shop examples.

Eisvogel — The best ice creams in Zürich

Of all the design patterns I learned in engineering school, the singleton and factory are probably those I use the most in my day-to-day programming activities. Sometimes I even mix the two to double the fun 😜.

In this blog post, I will show you how to implement these patterns with TypeScript.

Singleton

In software engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one “single” instance (source).

A singleton is probably like your hairdresser. When you need a haircut, you do not want to go to a salon and get any new…


An introduction to deploy web applications on the decentralized blockchain network of the DFINITY foundation.

Photo by Bradley Dunn on Unsplash

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…


Can our web editor for slides work on the futuristic internet of the DFINITY foundation? Let’s figure it out.

Source: DFINITY press kit + DeckDeckGo logo

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.), …


Photo by Monica Sauro on Unsplash

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. …


A practical hack to make CSS nth- selectors variable within Web Components.

Photo by Mario Gogh on Unsplash

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…


How to bundle ESM, IIFE or CommonJS libraries with esbuild.

Photo by Colin Watts on Unsplash

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.

Source forum resetera

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…


Import Markdown files as Docs only pages, use a CDN to load dependencies & sort stories.

Photo by Florencia Viadana on Unsplash

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…


Build a plugin for Figma with esbuild, the extremely fast JavaScript bundler.

Photo by Uillian Vargas on Unsplash

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. …


Export your Figma frames to presentations with DeckDeckGo.

I am thrilled to unveil a new way to turn your Figma designs into animated slide decks thanks to the open source plugin I recently published: Figma to DeckDeckGo 🥳.

But… Why?

You may ask yourself why would you export your content from Figma to DeckDeckGo? After-all it is possible to present a design without a 3rd party platform. I get that but, before making up your mind, let me list some advantages I do see in such a solution.

David Dal Busco

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store