DEV Community: Ezequiel E. Tejada

Dipping my toe into VSCode's Remote Container feature.

Ezequiel E. Tejada — Sat, 03 Jul 2021 10:33:39 +0000

Hi! Long time no see. I hope to keep some regularity publishing articles along the way, but don't hold your breath.

This time, I'd like to tackle a problem I'm having when I'm working on multiple projects that is keeping a consistent development environment.

It's been a while I've heard that docker could be an appropriate solution for this problem, but I didn't want to learn it at the time because I was involved in other things.

But the time has come and with the release of VSCode's Remote Container feature, now is the moment to deal with this and learn some docker, let's do this!

Docker installation

First of all, we must install Docker Desktop. Note: I'm doing this on my Windows Computer, if you'd like a Linux flavored step by step, let me know in the comments.

Go to Docker Desktop download page and click on Download. Tip: Did you know you can install it using Chocolatey with the command "choco install docker-desktop"?

devcontainer.json

This file tells VSCode how to handle the container. This is great if you want your team to use certain extensions.

You can create the file in your project's root folder or on ".devcontainer/devcontainer.json"

devcontainer.json example content:

{
  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:0-12",
  "forwardPorts": [3000],
  "extensions": ["dbaeumer.vscode-eslint"]
}

Also, you can select a devcontainer template file for your environment by selecting the Remote-Containers: Add Development Container Configuration Files... command from the Command Palette (F1) It will generate a folder called .devcontainer and inside we will find two files. .devcontainer.json Dockerfile

These files are necessary to configure the image just like we wanted and setting everything up on image startup.

For more information, there is a devcontainer reference page

Kicking the tires

Seems there we have the basic stuff to run our code in a container, so let's give it a go.

Click on the green button which is located at the bottom left corner of the VSCode screen and then select the "Reopen in container" option. This will use the .devcontainer.json file to use a docker image, load your files inside it, and getting it ready to serve.

It kinda worked, however, it seems that some things were missing. Since it's a new image, all the global commands weren't there. Also, all the sessions and environment variables were gone too.

To fix that, we should work on the Dockerfile adding this

RUN su node -c "npm install -g @angular/cli"

This will run every time we rebuild the image, to make the "ng" command available as soon as possible.

With firebase cli, we can make use of the firebase login:ci command to have a token and avoid logging in into Firebase every time the image rebuilds. The token can be saved into devcontainer.json with the "containerEnv" property:

    "containerEnv": {
        "MY_CONTAINER_VAR": "some-value-here",
        "MY_CONTAINER_VAR2": "${localEnv:SOME_LOCAL_VAR}"
    },

Or creating a devcontainer.env file in the .devcontainer folder. Beware to gitignore this file to avoid committing env variables that shouldn't be public.

Once we have Angular and Firebase setup, we can continue to work on our project. Is it done? Can we improve it? "Sure to both questions" but that's for another post. I hope you've liked it.

As always, I'd like to know what do you think about this. Have you tried it? Have you encountered any problems? Please let me know in the comments.

See you next time!

My take on... the recruiting process

Ezequiel E. Tejada — Mon, 31 May 2021 07:43:44 +0000

Howdy 👋🏻

This time, I'd like to talk about the recruiting process. You know, the first step before getting your next job.

https://media.giphy.com/media/l2Sq6TpbRV4oD7zbi/giphy.gif

It can be quite frustrating for everyone involved, and I guess it may be because each party doesn't know what to expect from the other side. You (talking from the developer side) will feel dazzled when the recruiters ask you personal questions that are not related to the position or feel they are doing market research with you. Not cool.

Don't be a call center agent.

https://media.giphy.com/media/1oEttHTW7Dh6WFabZd/giphy.gif

My first job was in a call center, there is nothing wrong with it, however, being a recruiter and a call center agent are two quite different jobs.

The recipe for getting low-quality candidates is measuring success by the number of phone calls the recruiter has. It means they will try to get as many phone calls as possible and not pay attention to the candidate's profile that fits the position.

It results in a frustrated recruiter that has a very large list of candidates and keeps shifting from one candidate to the next one. "Does not fit", "they are not interested", "don't even know the tech stack" may be the most common conclusions on those calls.

https://media.giphy.com/media/LO8ipFG7sfgAPRyJW7/giphy.gif

Thus, doing some proper research beforehand will save everyone's time. Recruiters could go through the candidate's profile and pay close attention to the technologies, the experience, what they are currently doing. Maybe they have the knowledge and experience, but checking their last positions, the recruiter can see if the candidate is currently working on a different level than the job opportunity offers.

In addition, having phone calls are exhausting and inefficient. Recruiters can spend days if not weeks calling a couple of dozens of people. Although, having a compelling message, with all the details (especially salary details) will help them to reach many more professionals and have a better chance to find someone that fits.

How much?

Oh boy! This topic has so many different and conflicting visions that I understand why so few people talk about this.

https://media.giphy.com/media/l2Je7t18abJCLdDVe/giphy.gif

This reminds me of a call I had with a recruiter for a development company related to SAP. We've been through the conversation regarding the position without any problem until we've talked about salary.

She tried to convince me with an example of a car dealership. She said: "If you want to buy a car, you should ask how much it is worth" (In this time, where there is this movement to avoid "objectivizing" people, suddenly, I'm a car 🤷🏻‍♂️) and I answered, "Well, in this case, is the salesperson who came to my house to offer a car and doesn't want to tell me how much is it"

https://media.giphy.com/media/26Ff0IG86VpW6S9vG/giphy.gif

The rule should be simple, whoever contacts the other party, should be the first one to disclose the number. If a recruiter contacts you, they should say: "I have X position for X money, are you interested?". The other way around is, if you are looking for a change, you should disclose how much you need to make the change (However, it's a bonus if the recruiter does it before you in this situation)

This, combined with the first point it's a red flag for me. If a recruiter contacts me and insists on having a call to then avoid disclosing all the details about the position, especially, the salary, it's a "no-go" for me. That kind of unprofessionalism is not what I want to have in my job environment.

Technical interview

https://youtu.be/ipsPgNEmAXI

I was going to have a gif, but the whole scene deserves it 😂

Here, I don't have any complaints, to be honest. Although, there are a couple of things that made me feel more comfortable than others.

It is crucial to make the candidate comfortable and to achieve that, there are a couple of strategies:

Ask the candidate to talk about any personal project they have with the technologies related to the position. This helps the candidate shine in a familiar environment.
Make it "One on One", having a conversation one on one is more comfortable than having the candidate talk to two or more people.
"We're on the same level, on the same team" I highly recommend this, make it very clear that both of you seek the same goal, working together. It is not a competition, so don't rush for answers. And that takes me to the next point.
Don't look for answers, look for ways of thinking/solving problems. Nobody knows all the answers, particularly in our job, where we lean on documentation a lot (at least I do most of the time). Because developers are not hired to give answers, they are hired to solve problems and many people confuse them.

For now, this is my take on the recruiting process. Probably I haven't covered much, but I'd gladly take any feedback and edit, add more details on what interests you the most. Furthermore, as we get more experience our ideas change, so this is what I think at the time of writing. It may change in the future, and it should, because it means we are evolving.

As always, I hope you can take anything useful from this and I'd like to know your thoughts.

Feel free to reach me on LinkedIn or Twitter . 👋🏻

Quick take on Angular Imports

Ezequiel E. Tejada — Wed, 26 May 2021 11:28:19 +0000

Good morning ☕!

A quick take that I'd like to share before I forget it.

What?

Working in Angular with many packages, sometimes VSCode doesn't "see" a new package and we've just installed and forces us to import it manually to get the IntelliSense for that module.

Why?

That's because Angular CLI adds a property in the "tsconfig.app.json" under "compilerOptions" called "types". Typescript documentation says: "If types is specified, only packages listed will be included in the global scope."

It means that since it's specified in our tsconfig.app.json it will overwrite all other typings that typescript may find in our node_modules folder.

How?

Just remove it, and Typescript will get every typing in our node_modules folder.

Thanks to maximedasilva for finding this out!

Solving Eric's storage problems

Ezequiel E. Tejada — Fri, 14 May 2021 11:39:46 +0000

Welcome back! 👋🏻 This time is not a development post, but it's something quite interesting if you need more space o a good backup strategy.

Who is Eric? 🤜🏻🤛🏻

Eric is a good friend of mine, we've worked together in Globant around 2013 and we've worked on a freelance project for an E-Commerce site. He is a gifted graphic designer, photographer, and musician.

You should check his LinkedIn and portfolio If you need to work with him, send an email

What problem does Eric have?

He had some trouble with his computer and replaced it with a new one. Having the old hard drives working fine, he wanted to use them as external hard drives for backup.

That's not bad, not at all, one backup is great if you had none, but we all know that a single backup is no backup at all.

https://media.giphy.com/media/y9gcCOXpNX8UfZrp0X/giphy.gif

What do other people do? 👀

When you work with clients' assets you shouldn't rely only on an external hard drive. This is way too risky, and it wouldn't be nice to ask for the assets again because your hard drive failed.

Some people have two+ physical hard drives or save the assets on their Gmail account but they are not very convenient or they can become very expensive, very soon.

Well, you can have multiple accounts and sparse the assets between all the accounts, but it means that you should know where you've saved what, and keep logging in and out can be quite time-consuming.

https://media.giphy.com/media/3o7TKswXkG2qVFIop2/giphy.gif

My Take 🐱‍👤

Having the data on the cloud is definitively the best place to have the backup of his assets, but it can be hard to manage if he doesn't organize them.

Also, there is a problem with having multiple desktop clients for each cloud provider. They consume a lot of resources that he is going to need to work on his computer.

The Tool 🔧

Here comes RClone They call it "The Swiss army knife of cloud storage" and I agree.

It allows him to back up, restore and sync data from his computer to almost any cloud provider. Mount cloud drives as network-attached / local disks. Check files for integrity and also union file systems to present multiple disks as one.

https://media.giphy.com/media/PvDM6QHuLPCxi/giphy.gif

Now that we know the tool, let's kick the tires and see how it works. 💨

Creating an account in Mega

Let's suppose he wants to enjoy having 100GB for free courtesy of MEGA.io so he has to create two accounts. I won't get into the details, it's just filling a couple of forms and confirming emails.

Once he has both accounts, we can set up RClone.

Setting up RClone

RClone is a binary made in go. It means that it only runs when we execute it but we wanted to have it running all the time, like a service.

Install and configure required applications

To run RClone as a service we can use an application called NSSM (Non-Sucking Service Manager) I suggest downloading the "latest release" version. It says on the NSSM webpage: "No "installation" of nssm is needed. Just place it somewhere on the system (preferably somewhere in your PATH) and run it."

Also, on Windows, we need to install winfsp to make possible mounting remote folders.

Configure each remote

The last step to run RClone is to configure the remote (each mega account)

To do that, we open a command prompt and run "rclone config" and go through these steps for each remote:

"New remote" - Type name of the remote (this is not the provider's name, but a unique name to identify this remote drive)
Select the provider (here we can use Box, Dropbox, OneDrive, GDrive, but in this case, we are going to use Mega)
Type the username (mega's account username)
Type the password (and confirm)
"Edit advance config?" (no, at this time)
Confirm that everything is OK.

Test run mounting your cloud drive

Let's verify that we can access our Cloud Drive. Open a command prompt and type "rclone mount --vfs-cache-mode full {remote name1)}:/ {drive letter}: {remote name2)}:/ {drive letter}:"

Where "remote name" is what you typed in step 2 of the last section and "drive letter" it's the letter that you want to use to access it in My Computer.

A couple of issues we may face in this step. ⚠

I get this error: "2021/05/14 09:48:32 Fatal error: failed to mount FUSE fs: mount stopped before calling Init: mount failed: cgofuse: cannot find winfsp" - This means we haven't installed WinFsp, which is needed for mounting in Windows.
I run the command, it says: "The service rclone has been started." but I don't see the drive in My Computer. - This happens when the command is executed on a command prompt with elevated privileges (as Administrator). The command must be executed by the user who wants to have the drive mounted.

Well, we've installed the programs, configured the remote, and tested that it mounts as a drive on our computer. Right now it will be available while the RClone command is running and as soon as we close it, the drive will disappear from our computer. To make these changes permanent, we must run RClone as a service, and here is where NSSM comes in.

Creating a service for RClone

To create a service for RClone we ran the command "nssm install {service name}"

Where "service name" is how we want to identify the service that will be running RClone for us.

In the application tab, we must fill in the path of our RClone binary location. Here is a tip, if you don't know where it is, you can find it by typing RClone in your start menu and then look for "Open file location", and then the arguments which are everything we typed after the "rclone" command on our testing. "mount --vfs-cache-mode full {remote name)}:/ {drive letter}:" (Refer to "Test run mounting your cloud drive" to know what "remote name" and "drive letter" mean)

Then we go to the "Log on" tab, select "This account..." and fill in your Windows user credentials. Another tip, if you don't know your FULL windows username you can open a command prompt and execute "whoami" and it will get you the information you need in NSSM.

Finally, we must go to the "Shutdown" tab and change the timeout for "Generate Control-C" to 10 seconds, it is needed because if RClone is syncing data, it won't exit immediately and if we force it, it may corrupt data. And then click "Install service"

We have two options, the first one is to reboot the computer to have the RClone service started or we can initialize the service manually on Task Manager. To do that, we must open Task manager and look for the "Service" tab, there we should find our fresh service waiting to be started. Right-click it, and then click "Start".

And now we have our Cloud Drive ready to go. 🚀

"CLI sucks!" 💩

Well, first of all... you suck! But I understand, sometimes having a graphical interface saves quite some time searching for the correct argument.

That's why RClone has a great Web GUI where you can tweak everything related to any remote. Just as an example, let's set a bandwidth limit because, as it is configured, it will use every single drop of the bandwidth you have (not cool)

To open the Web Gui, we have to open a command prompt and execute this command: "rclone rcd --rc-web-gui" It will open a browser window with a dashboard where we can tweak RClone.

On your right, you will find "Bandwidth". Click on "Modify". As an example, I set 300Kb for uploads and 1Mb for downloads.

But there are many options you can change, add remotes, setting mounts. I highly recommend going through the RClone documentation

Careful syncing data ⚠

Syncing data takes time, much more time than copying files to a hard drive or USB Stick. When you copy a file to a Cloud Drive, it will look like the copy is finished, but actually, RClone is syncing in the background.

This is meant to be used as a backup drive. If you need to upload a file immediately, you can use RClone web GUI or each service website.

That's all folks 👋🏻

If you've got here, Thanks!!! It's quite a load of information to process, so I appreciate you've read it. If you've found this information useful or interesting, please let me know in the comments, thoughts, and if this topic gets enough attention I'll write about how you can backup USB drives automagically or how to "kind of" fusion your cloud drives for "unlimited" storage. 🤯

Feel free to reach me at LinkedIn or Twitter.

Custom 2FA With Firebase Cloud Functions

Ezequiel E. Tejada — Wed, 12 May 2021 11:39:14 +0000

This is my first (of many, I hope) post here, and ever. And I'll try to show all the iterations and learnings from each of them.

The requirement

Our client required an email and password login and then depending on the role, it requires the user to type the missing numbers of a static Pincode. Then if the user/password/Pincode matched, the application takes the user to the dashboard.

The blank spaces are random, so it should request a different set of 3 places each time

First implementation

In the beginning, it was a 2 step mat-stepper where in the first step it asks for the email and password and the second step (required for the roles that have pincodes) where it asks for the Pincode.

Once we get the email and password from the form, we would then log the user in and if the user requires a Pincode we would send them to the Pincode screen. The user types its Pincode and we would compare them with what we have in Firestore. If it matches we would let the user go to the authorized part of the app, if not, the user will be logged out.

The problem with this approach

To get the Pincode from Firestore the user must be logged in, which defeats the purpose of the Pincode.

A contractor made a pentest on the app, and one of the vulnerabilities they've found was that the user was able to change the URL to the authorized section and bypass the Pincode part of the process.

https://media.giphy.com/media/11fot0YzpQMA0g/giphy.gif

Yeap, that happened

Second implementation

https://media.giphy.com/media/1URYTNvDM2LJoMIdxE/giphy.gif

This needed fixing, so we decided to lean on Firebase Cloud Functions to be our gatekeeper.

We take the email and password from the login form, and then send them to the cloud function. There it checks for the credentials, if the user requires a Pincode, it returns the positions needed for the second step along with a token that identifies that attempt (The same user can have multiple attempts with differents positions requested by the cloud function), if not, it returns a custom token that will be used to authenticate the user in the frontend.

When the user requires a Pincode and has the positions requested by the cloud function, it types the numbers and sends the values (not the positions), the token, email, and password to be all checked on the cloud function. In the Cloud Function, we check the credentials, get the positions based on the token provided, and validate the user's values with the stored Pincode. If everything matches, a custom token is returned to authenticate the user on the frontend, else, the cloud function sends a generic error message to let the user know that should try again.

What can be improved

As in every project, we do what we can with the time we have. It means that some improvements that could be made, weren't.

Static Pincode

At the time of writing this post, the Pincode is static, which means that it is stored in the database as plain text. It should be dynamic, a code that changes over time, to avoid someone that finds out a Pincode to use it anytime.

Hash Pincode and Custom Claims

The Pincode should be stored as a hash instead of plain text since it's very sensitive data. If we decide to use a one-way hash, we could also store the hashed Pincode as a Custom Claim property in the user's account. That would avoid a call to the server and speed up the Pincode checking process.

Simplifing the login process

Regarding logging in in two steps, I think they could be merged on a single step that requests email and password, but when the user finishes typing their email (blur the input) triggers a call to a cloud function that checks if that email belongs to a user that requires a Pincode if it does the Pincode input could be shown below the password input.

Get the authentication process from the Pros

Firebase offers a quite robust solution regarding Authentication, however, when there are special needs, it's a better idea to rely on a third-party solution than build it on our own.

Firebase offers the possibility to integrate a third-party solution quite seamlessly ( docs ) Actually, we use this to integrate our Pincode solution but it would be better if we've used it to integrate another solution like the one provided by Auth0, Twilio (Authy) , or Okta

Well, this is it. My take on this problem and how we've solved it. I hope you can take anything useful from our experience and I'd like to know your thoughts about this.

Feel free to reach me at LinkedIn or Twitter .