Creating an article in Medium is a lot easier than in WordPress

One of the problems I had when writing an article is displaying a programming code. On Medium, just adding a link to your github gist will display your code beautifully. Even better, you can add a working demo from stackblitz and Medium will display it too without any much settings or configuration!

I wish WordPress could do something like that. I might not be looking hard enough for plug-ins to do this but for now I prefer Medium if I’m going to write something with a live demo

 

In case you are wondering, here’s the link of my medium article https://codeburst.io/creating-a-rock-paper-and-scissors-game-in-angular-9c16619486a9 hehe!

Angular – Display Current Location Using Google Map

In this blog post, I’m going to show you how to display your current location with google map. I’m going to use Angular Google Maps ( AGM ) to speed up the development time and it is also very easy to use. It is also a nice way for me to try out libraries in Angular ecosystem.

Set up

To add the library to your project, open a command prompt and run this command

And add the necessary imports to your app.module.ts

Getting API Key

  1. Go to the Google API Console.
  2. Select a project or create a new one. Note that if you are a Firebase user, you can see your project here and use it for getting an API key.

 

 

3.

Replace the placeholder key in the app.module.ts with your own key.

We’re done with the setup.

Now we can use the agm like this

 

To mark our current location, we are mainly interested in “latitude” and longitude” inputs.

All we have left to do is get those values. We can get those values with the code snippet below.

 

That’s it. Thanks for reading.

 

Here’s the stackblitz demo

Angular – Get the ip address of the user

In this short blog post, I will show you how to get the ip address of the user.

I’m using v5 for this tutorial. If you are using v2/v4, just replace the HttpClient with just Http.

Here it goes:

This should work now. Though the code editor is telling me that this line

this.ipAddress = data.ip;

is wrong.

Looking at the official docs for the http client, I need to tell the httpclient what the type response will be so  I will create an interface with just a ip property of string.

And add it like this


That’s it.

Thanks for reading.

Here’s the stackblitz demo

Angular – Clear all your console logs in production build with just a few lines of code.

When you were developing an application, you probably insert a lot of console.log statements in your code everywhere. Sometimes you display information that your users are not supposed to see but you think that most of the time, most users will not press F12 so you think you’re good. Not only it is a bad practice, you are also being lazy.
I will show you a trick where you can retain all your console log statements when in development mode and clear all of it when in production mode.
Go to your main.ts file and add this:

Now you have a clean console log when you build your app for production

Note:

Just in case you don’t know how to build for production, here’s the command

 

Note to myself when deploying to firebase

When developing Angular app with firebase, I usually update the database security rules in the firebase dashboard. Here’s a sample

 

Here I allow the reading of data in my “users” node so that it can be access by anyone without being authenticated.

It worked as expected.

Now, I was ready to deploy it in firebase, so I did a production build first then type the command in the command prompt

firebase deploy

Suddenly, my app stopped working! I can’t access the “users” node anymore. It was too late before I realized that I forgot to update the database.rules.json file in my project!

The silver lining for this mistake is that my security rules is simple enough and I can recreate it immediately. But imagine what would happen if it is a complex security rules and thousands of users are already using it?! ( Well okay around 25-50 users ) That would be a disaster.

Always think twice before pressing that ‘enter’ key when deploying and you will thank me later.

Entity Framework Core for Newbie — Add-Migration Not Working

If you are starting your project with ASP.NET Core Web Application, most probably you will not encounter the errors below. Add-Migration command will work without any problems. I started my project with class libraries for my Domain and Data layer and I didn’t know that adding migration needs a lot of ceremonies.

I’m starting to play around with Entity Framework Core and I am so excited about it. When I get to the part where I have to add a migration, I typed in the command

add-migrations init

Where init is the migration name. Then, this happened

Could not load file or assembly ‘System.Collections.Immutable, Version=1.2.1.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’. The located assembly’s manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

It took me almost an hour to find a solution for this. But the solution is very simple. Just add another project like a console app and make it as your StartUp Project

 

Everything should work right? Not yet. If you run add-migration again, you will receive this error

Could not load file or assembly ‘Microsoft.EntityFrameworkCore.Design, Culture=neutral, PublicKeyToken=null’. The system cannot find the file specified.

 

The error is straightforward, you just have to go to Nuget Package Manager and install the Microsoft.EntityFrameworkCore.Design in your Sandbox/Console App.

Run the add-migration again and everything should work fine.