A Blueprint for CloudFunctions based REST API

Choosing Firebase as the eco-system to build your serverless application upon will provide you with most of the back-end tasks done and ready to use.

However, there will be times you’ll need to tailor some server-side functionalities to your specific design needs, and, that’s where Cloud Functions come into play.

A task I found to be recurring is a set of administration functions for managing users with elevated privileges. This will result in being crucial, for instance, to implement role-based access control according to Firebase best practices.

This article describes how to implement an API using Cloud Functions to effectively…

Making Injected Services Working Asynchronously

Photo by Pierre Bamin on Unsplash

If you spent enough time programming with Angular I bet there have been times you wished having a service of yours injected asynchronously.

Assuming you’re already familiar with the concept of dependency injection and how this works in Angular, let’s go straight to the pain point:

  • Dependency Injection works only synchronously

So, what to do when you need to wait for an asynchronous event before having your service ready for injection?

Well, it goes without saying you can either:

  1. Block the overall application (or a part of it, eventually) waiting for the asynchronous event to occur. This is the ideal…

Breaking Free From The Same Origin Policy

Photo by Mateus Campos Felipe on Unsplash

Developing a single page application is fun, most of the time. Crafting the perfect piece of code to get the browser do what you want, instead of what has been designed for, gives you the thrill. At times, it will feel like being on a mission to rectify a browser’s misfortune such as in this article’s case.

Downloading Files

Immagine your application store files that you allow the users to download at times. …

Adding Emoji Support To Web Applications

Photo by James Lee on Unsplash

If you see a waving hand 👋🏻 it means you’re reading this article from a platform supporting emoji natively.

Good for you!

If not, you’re likely seeing a couple of little squares since the underlying text rendering engine doesn’t know how to process the Unicode codepoints describing the waving hand emoji.

With Microsoft Windows 10 joining the club and finally providing native support for emoji with the update on May 2019, we are one step closer to fill the “emoji divide” with macOS/iOS and Android.

However, there’s plenty of browsers around the world running on unfortunate operative systems still deprived…

Blending In The Smart Payment Buttons

Photo by Isiah Gibson on Unsplash

If you are familiar with the latest Smart Payment Buttons for PayPal Checkout you surely realize integrating this technology with Angular requires some degree of creativity:

Smart Button Client-side Integration

The piece of code above comes from the official PayPal developer’s documentation illustrating how to set up an order, capture the transaction while approved and follow it up server-side where supposedly you’ll be validating the transaction details.

The thing is the buttons are designed to set up and manage the payment flow using asynchronous callback functions some of which require you to interleave your own async calls to your server…

Breaking Free From The Top Down Model

Courtesy of Angular

Angular is a brilliantly designed framework and we’re (usually) glad of structuring our web application by its rules.

Every Angular’s application is like a tree, so, that the parent template contains the children components and every child displays its content within its view only. And that’s usually fine.

However, what if we could enable children components to break through the limits of their own views, so, for them to display some of their widgets on a parent toolbar or pieces of information on a global status bar without data binding restrictions of any sort?

That’s what I call “teleporting” content.

Our Use Case

Google Analytics with gtag.js

Photo by Webaroo.com.au on Unsplash

I recently wanted to include Google site tagging capabilities to a simple single-page application of mine and that’s what I came up with:

Using gtag

In the example above we see the GtagDirective at work (look closely in the .html).

The gtag="home" statement in the .html sends a page-view event to the Google Analytics, Google Ads or Google Marketing Platform account you configured during the initialization (more next).

The “home” text will appear in the report to be the page title while the page location is automatically detected by the directive provided the application makes use of a Router.


Using IP Geolocation Services in Angular

Photo by Adolfo Félix on Unsplash

There are several IP-related information services out there offering to accurately locate users based on their IP, so, after a bit of digging, I decided to test both https://iplist.cc, providing country-level geolocation only but is totally free for both personal and commercial use, and https://ipinfo.io, a more professional service providing city-level geolocation with a generous 50.000 requests/month in their freemium tier.

The Simpler The Better

Performing the API calls is just one single line of code making it pretty easy by itself already, so I wondered… How can I make it even more easy to use in Angular?

Injectable Observables

Coming from a history of C++…

Router Tricks Series

When The Router Does More Than Routing

Photo by Shahadat Rahman on Unsplash

Imagine your app has a ‘Contact Us’ link and instead of routing to a dedicated page you’d like a contact form to popup instead.

There would be nothing wrong in hardcoding the ‘Contact Us’ button to do something different than navigating when clicked but wouldn’t it be nice having a way to instruct the router to do that ‘something different’ for us?

The greatest advantage in this would be having a unique way of treating all the links on a toolbar or menu, no matter if they’re expected to really trigger the navigation or do whatever else we need them…

Overcoming the Hangover after Mixing Up Angular with Stripe

Photo by Devon Janse van Rensburg on Unsplash

I’ve to confess I had some hard time pulling this out. I can tell Stripe.js v3 isn’t designed to get along with Angular (as opposed to v2 that integrated like a charm). Nevertheless, after several days of struggles, I’m quite satisfied with the result and I believe it’s worth an article :)

What you’re going to read about here is:

  • How to turn Stripe Elements into Angular components.
  • How to (optionally) bridge such components with the Angular’s form API, so, to blend in with other controls in a template-driven or reactive form.
  • How to (optionally) turn such components into Angular…

Lucio Francisco

I believe that whatever problem we’re puzzling ourselves with, once we really get to the bottom of it the solution has to be simple

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