Build a generic, lazy-loaded dialog with Angular and Tailwind CSS

closeup of small owl
closeup of small owl
Photo by Emile Guillemot on Unsplash

I have the opportunity to participate in Owlly, an amazing and meaningful open source project founded by Sandro Scalco which aims to enable digital democracy in Switzerland.

Last week, as we were discussing the need to pre-render the main Angular application using Scully, we also took the decision to migrate it to Tailwind CSS.

As a result, I notably had to create a custom, generic lazy-loaded modal.

Meta

This article has been published in November 2020. The solution has been tested with Angular v11 and Tailwind v2.

Introduction

This tutorial describes the creation of a generic dialog with Angular and Tailwind CSS. By generic, I mean that the goal is the creation of a dialog’s container which can be reused several times in the application, with different content, without the need to rewrite everything multiple times. …


The story of the Stencil’s compiler and its magical integration of the Web Worker API.

Image for post
Image for post

Once upon a time, there was a compiler that generates Web Components and builds high performance web apps called StencilJS. Among all the build-time tool ever created, it had for goal to build faster, more capable components that worked across all major frameworks.

On the internet next door, there lived a boy (me 😉). And the boy watched the compiler grow more and more effective, more and more developer friendly with each passing year.

One day, as he was developing something new in his beloved project DeckDeckGo, the boy had the idea to experiment a feature of the compiler he had never tried so far, the integration of Web Workers. …


The outcome of all amazing contributions to DeckDeckGo.

Image for post
Image for post

Let’s cut right to the chase: Hacktoberfest 2020 for DeckDeckGo has been amazing 🤩.

We have received thirty-two Pull Requests which not only helped us to solve features and issues but definitely pushed forward our editor for slides 🚀.

We would like to thank once again each and every person who gave us a hand and, the least we can do, give them credits back by listing here afterwards all their amazing work!

Note: following contributions are sort by date ascendant.

Display Regions

We aim to be transparent. …


A bare minimum checklist of the information required to submit your application to the App Store and Google Play.

Image for post
Image for post
Background’s photo by Jess Bailey on Unsplash

One of my current client requested a list of the bare minimum information required to publish their app in the App Store and Google Play. Once again, I did not remember where I saved such check-list 😅.

That’s why, instead of charging them for such process, I had the idea to wrap up these information in form of a public blog post I’ll try, hopefully with your help and inputs, to maintain up-to-date.

Last Update

This blog post has been updated for the last time Tuesday 3rd November 2020.

Distribution

Following questions have to be answered in order to distribute the app in both App Store and Google…


How to recursively remove delete methods from the document’s object you just updated and have in memory.

Image for post
Image for post
Photo by The Creative Exchange on Unsplash

This morning I had to improve a function we used in DeckDeckGo to recursively clean objects after persistence. Because I am currently quite busy but would not like to push my blogging habits too much on the side, I got the idea that this small “hack” would be a nice subject for a new blog post 🤗.

Introduction

When you use Cloud Firestore, in order to delete specific fields from a document, you have to use the FieldValue.delete() method when you update a document (as displayed in the documentation).

For example, your database contains a document such as the following:

{
description: 'Hello World'…


Image for post
Image for post

Implementing a state management in modern web Angular applications can be tricky.

There are many libraries, such Ngrx, ngxs, Akita, which can be integrated to manage stores but, these are strongly opinionated and have impact on the architecture of the solution.

If we omit the concept displayed by Jonas Bandi in his interesting article, a common alternative to not using 3rd party libraries, is the development of custom stores with RxJS.

In both cases, libraries or custom, RxJS is used 🤷‍♂️.

Even though RxJS is a wonderful piece of technology, is nowadays a de facto standard when it comes to Angular development, and installed per default with almost any starter kits, it can be still opted-out. …


Use Git commands with the GitHub GraphQL API to create a pull request in Firebase Cloud Functions

Image for post
Image for post
Background photo by Lukas Blazek on Unsplash

We recently released an exciting new feature at DeckDeckGo.

In addition to being able to deploy your presentations online as progressive web apps, our web open-source editor can now push your source code to GitHub, too.

This new function runs on Cloud Functions for Firebase. Because we like to share our discoveries, here are the key things we learned while developing this integration.

Access Tokens

To interact with GitHub, we need a token.

Personal token

If you’re looking to interact with GitHub with your account, you can use a personal access token. Once created, you can set it in the configuration of our Firebase functions. …


Grant access to your Firebase Cloud Functions only for authenticated users.

Image for post
Image for post
Photo by Nigel Tadyanehondo on Unsplash

I started yesterday the refactoring of one of the core functions of DeckDeckGo by declaring a new Firebase Cloud Functions, which can be triggered via HTTP requests.

As I was looking to protect its access, in order to avoid sneaky requests, I followed one of my previous blog post to protect it with the help of a bearer.

Once I tested this first step of the feature, I actually noticed that it was not the correct solution for my use case. I rather had to grant the access using the users tokens.

Verify Users’ Tokens In Cloud Functions

It will probably sound silly for those who know the solution, but it actually took me quite some time to find how to verify the tokens of the users in Firebase Cloud Functions. …


How to send email with HTML content from Firebase Cloud functions

Image for post
Image for post
Photo by Volodymyr Hryshchenko on Unsplash

As you can probably imagine, at DeckDeckGo, we do not have any collaborators who checks that the publicly, published, slides have descent content. Neither have we have implemented a machine learning robot which would do so, yet.

I am taking care of such a task manually. I have to add, it makes me happy to do so. All the presentations published so far are always interesting.

Nevertheless, I have to be informed when decks are published. …


The execCommand method has been marked has obsolete, here is how I re-implemented its styling command.

Image for post
Image for post
Photo by Nathan Rodriguez on Unsplash

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it. — MDN web docs

Without a clear explanation on why nor when, document.execCommand() has been marked as obsolete in the MDN web docs. Fun fact, it is not marked as deprecated in all languages, as for example French or Spanish which do not mention anything 😜.

For DeckDeckGo, an open source web editor for slides, we have developed and published a custom WYSIWYG editor which relied on such feature.

Because it may be future proof to proactively replace its usage by a custom implementation, I spent quite some time re-implementing it 😄. …

About

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