A Series of Web Components that you can create in Angular and avoid having to import a whole library for it. In this post, I’ll be creating a simple sliding side bar for your Angular Web Apps and PWAs (Progressive Web Apps) that you can use to hide your menu options and trigger from anywhere in the app.
Let it slide, let it slide, let it slide!.

Image for post
Image for post

Dependencies: Angular CLI

Let’s build a simple yet flexible and configurable sliding bar in Angular (usually used for navigation purposes) while at the same time we learn some important concepts about:

  • Creating configurable…


A Series of Web Components that you can create in Angular and avoid having to import a whole library for it. In this post I’ll be creating a simple wizard stepper for your Angular Web Apps and PWAs (Progressive Web Apps), just using “vanilla” Angular components and services in a way you can consolidate your views while delivering great user experiences.

Image for post
Image for post

Dependencies: Angular CLI

Let’s build us ourselves a cool, simple and flexible wizard stepper component in Angular while at the same time we learn some important concepts about:

  • Creating encapsulated, decoupled components that communicate with one another seamlessly
  • Using…


A Series of Web Components that you can create in Angular and avoid having to import a whole library for it. In this post I’ll be creating a simple, yet sleek way to add a splash screen for your Angular Web Apps and PWAs (Progressive Web Apps) and avoid your users having to stare at a blank screen while your site / mobile app loads.

Image for post
Image for post

I hate staring at a page or web app while it loads piece by piece. I’d rather have a nice and graceful introduction into the page by having a nice splash screen. This splash screen…


Whether you pull them from third-party CDNs, serve them individually yourself or encode them in your CSS, it all depends on your web app needs and the end user experience. Pro-tip: ditch PNGs and icon sprites in favor of SVGs and SVG sprites for your icon needs moving forward. You’ll thank me later ;). Please check out the CodeSandbox for this post.

Image for post
Image for post

One of the current trends when it comes to using icons in your apps (whether for the web, mobile web apps — or even native apps for that matter) is using vector images (in the form of SVGs…


Make your users feel secure while using your apps, while providing the convenience of leveraging an existing Gmail account for authentication.

This tutorial shows what you can do at a bare minimum to provide basic authentication in your apps. I’m only focused on one of the many sign-in providers that Firebase offers — Google. In upcoming tutorials I’ll show how to authenticate with Email/Password, Phone, Facebook, Twitter, Github, Microsoft, etc.

We’ll be building a two-page app that allows users to log in using their Google Account. You can implement this in your apps to apply a layer of security and…


In a simple, elegant, and yet non-intrusive way, you can customize the way you display information upon tapping on your Google Map Pins.

Dependencies: Google Flutter Maps package

Note: This post is a follow-up post on previous posts on how to add custom markers to your Google Maps and about adding route lines to Google Maps. This post also assumes you’ve set up your Flutter project using the Google Flutter Maps package. Github project for this tutorial here.

Image for post
Image for post
A more modern take on the Google Map’s marker info window

If you want to move past the retro look below on how to display Google Map’s contextual information related to a marker…


(Hint: It’s just a bunch of connected lines)

Note: This post assumes you already have the maps set up in your project using the Google Maps Flutter Package, as well as have your own Google Maps API key and enable the Google Directions API for the routelines to show. If not, follow this link on how to set up your Flutter project to work with Google Maps. Github project for this tutorial here.

Image for post
Image for post

When I came to realize how easy it was to implement route lines on a Google Map (thanks to the Flutter Polyline Points Package!) …


In this quick tutorial I demonstrate how to apply custom markers to your own Google Maps in Flutter.

Note: This post assumes you already have the maps set up in your project using the Google Maps Flutter Package, as well as have your own Google Maps API key. If not, follow this link on how to set up your Flutter project to work with Google Maps. Github project for this tutorial here.

Image for post
Image for post

If you’re like me, you want to have some level of customization when it comes to creating your own Flutter apps — and specially using common components such…

Roman Jaquez

Software Engineer / GDG Lawrence Lead Organizer / Follow me on Twitter @drcoderz — Subscribe to my YouTube Channel https://tinyurl.com/romanjustcodes

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