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.


A quick way to set up i18n for Stencil components without dependencies.

Photo by Lucas George Wendt on Unsplash

I have been using the same strategy to internationalize quickly Stencil components without dependencies in various projects. Among others for the project Owlly or the Bonjour foundation.

As all these projects are open source, I will share with you my recipe 🧑‍🍳.

Goal

I recently internationalized with the help of the community our project DeckDeckGo, but this article has for goal to add translations to a relatively small component or set of components without dependency.

I use this solution when I create components that contain some slot with default values and which have has primary market our lovely “four languages +…


Unzip a .zip file in an asynchronous Node.js context.

Photo by Florian Steciuk on Unsplash

I am developing a new feature of DeckDeckGo for which I have to unzip a data in Firebase Functions.

It took more time than expected to code such a Node.js function, that’s why I am sharing this solution, hoping it might help you some day too 😇.

Unzipper

Node.js provides a compression module Zlib but, it does not support ZIP files. Luckily, we can use the library unzipper to handle these.

npm i unzipper --save

Unzip With Async Await

My new feature reads and writes data uploaded in Firebase Storage through streams. I also develop my code with a promises (async / await) approach. …


Develop a Twitter Bot that runs in GitHub Actions

Photo by Ravi Sharma on Unsplash

I launched recently DiscoverWeekly.dev a website that shares each Wednesday the new music playlists made by the developers.

To spread the information and let people subscribe, in addition to an RSS feed, I opened a Twitter account and developed a Bot that tweets once a week about the news playlists as well.

Here is how you can also create a Twitter Bot that runs periodically in GitHub Actions.

Twitter API

Tweets are posted with the help of the Twitter API. To get access to such a feature, you need to create a developer account and request access. …


I developed an open source website to discover new music on a weekly basis without an algorithm.

Like everyone in the current situation, I miss being able to do a lot of different things such as hugging my mum, attending live events or being able to travel.

Recently, I also noticed I began to miss some immaterial things too, notably discovering new music to listen to totally unpredictably and not through an algorithm. Those bands and songs for which I fall in love for no other particular reason than the fact that they remind me a good memory.

The Upsetters? Discovered at the IQ Bar in Zürich, end of Summer when these were still open. We were…

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