Naguel (Page 5)

Ghost

Configure a Ghost blog using a custom domain with www and non-www using CloudFlare

You know Ghost, you already have a blog hosted there under an URL like "yourname.ghost.io", and you already know it can cause you a big headache to configure your custom domain to point to your blog using both the www and non-www version of your domain and not just one as Ghost seems to allow.

3 min read

Ghost is a blogging platform that you can host in your own web server or allow the company to host it for yourself to save time and stress (and to just focus on writing posts). Think about it as a WordPress site that has been tear down to the basic functionality like write posts, tag them and no more like that.

"Ghost is a platform dedicated to one thing: Publishing." Ghost's About page

But if you are reading this it means that you already know Ghost, you already have a blog hosted by them under an URL like yourname.ghost.io, and you already know it can cause you a big headache to configure your custom domain to point to your blog using both the www and non-www version of your domain, and not just only one as Ghost seems to allow.

I fought with this problem when I created this blog, so probably what I experienced can help somebody now.

CloudFlare DNS and Page Rules configuration

Let's assume you have the yourdomain.com domain and you want to point it to yourname.ghost.io.

Also, let's go a even forward and assume you already add your custom domain to CloudFlare, on its non-www version, because the main problem here is to make both www and non-www work, as Ghost already explains how to get only one of them working.

DNS settings

Access your domain DNS setting within CloudFlare in order to create a new CNAME record that points your domain without www to your Ghost's blog URL.

Type: CNAME
Name: yourdomain.com
Target: yourname.ghost.io

Then, add a new CNAME record, this time for pointing the www subdomain to the domain without it, as follows:

Type: CNAME
Name: www
Target: yourname.ghost.io

As reference, you can take a look at my configuration in the image below.

The first two rows are the one that matter for this tutorial, and the others are used to make Google G Suite works (so I can have my email hosted by Google).

It is necessary that the configured both CNAME to go through the CloudFlare servers, which means that the cloud icon at the last column should be orange, in order to make use of all the other features from the service.

Page Rules setting

Lucky us, CloudFlare provides a way to configure page rules in order to redirect somebody who types some URL to another configured URL.

In this case we want to redirect the www version of our domain (www.yourdomain.com) to the non-www version of it (yourdomain.com).

Note that my decision was to have the non-www version of my domain as the default one because I just like it that way. If you prefer the other way around, then invert the CNAME configuration on the previous step and configure the following page rules inverted too.

That being said, add a new rule for an URL matching "http://www.yourdomain.com/*", pick the "Forwarding URL" setting, configure its status code as "301 - Permanent Redirect", and enter "http://yourdomain.com/$1" as the destination.

Look at my page rule for this blog to get things even more clear.

Probably you're wondering about the * and $1 on the URLs. They are there to match whatever comes after the domain with www in order to add the same to the non-www domain version once the redirection takes place.

For example, with this page rule as described, when somebody types www.yourdomain.com/this-is-a-blog-post/ it's going to be translated to yourdomain.com/this-is-a-blog-post/.

No visitor is left behind with this configuration.

Ghost Custom Domain configuration

Finally, this whole CloudFlare setup will make sense if you go back to your Ghost blog configuration in order to set the non-www version of your domain as the Custom Domain of your blog.

That's all it takes to have both yourdomain.com and www.yourdomain.com working with your Ghost blog.

If you can't see the results, meaning the redirection is not working for you, first take a break because it could take some minutes to take effect, or blame the cache of your browser (clean your browser cache and try again, or simple change the browser you are using).

VTEX

Differences between POST, PATCH and PUT in VTEX Master Data

There are small differences between POST, PATCH and PUT that justify the existence of all of them, and knowing this could improve our VTEX implementation.

3 min read

We can thrown five different HTTP requests at the VTEX Master Data: GET, POST, PATCH, PUTCH and DELETE. GET and DELETE are very simple to understand (once for get documents and the other one to delete them), but POST, PATCH and PUT seems like they all do the same thing.

There are small differences between POST, PATCH and PUT that justify the existence of all of them, and knowing this could improve our VTEX implementation and how we interact with the Master Data.

POST, PATCH or PUT?

The first one, POST, allows us to create a new document in a specific Data Entity. If the document already exists we won't be able to introduce the new data into the Data Entity.

For example, if we perform a POST request to create a new client with the email johndoe@example.com and name John, but the Data Entity CL already has a client with that email address a new document won't be created.

It doesn't matter if the existing document with the email johndoe@example.com has a different name for the client. Since the email needs to be unique the request will fail and the other attributes like the name will be discards.

On the other hand, PATCH works just like POST in terms that it will create a new document, but if the document already exists then the attributes from the existing document are updated with the new values that we are sending in the request.

Take into consideration that PATCH, in the scenario where the document already exists, will update only the attributes that we are sending in the request. The attributes that exists on the document but are not mentioned in the request won't be affected.

Finally, PUT works as POST too when the document doesn't exists: it creates a new one with the values we're sending in the request.

When using PUT in an scenario where the document already exists it will cause the existing document in the Data Entity to be completed overwritten. In other words, the existing document will be deleted, a new one will be created with the attributes mentioned in the request, and the ignored attributes in the request will be empty in the final created document.

POST, PATCH and PUT in VTEX Master Data documentation

Let me recap. POST to create a new document, PATCH to create a new document if it doesn't exist or to update the values of the attributes in an existing document, and finally PUT to create a new document if it doesn't exist or to overwrite an existing document.

A friendly example

Given an empty CL Data Entity, we perform a POST to create a new document with the following JSON in the request.

{
     email : "johndoe@example.com",
     firstName : "John",
     lastName : "Doo"
}

Since the document doesn't exist, it will be created.

Then, we decided to change the lastName of the document because we spot a typo on it. For this, we use PATCH and the following JSON in the request.

{
     email : "johndoe@example.com",
     lastName : "Doe"
}

After the request the document on the Data Entity will look like the following.

{
     email : "johndoe@example.com",
     firstName : "John",
     lastName : "Doe"
}

Finally, the document became obsolete and we need to overwrite it using PUT and the following JSON.

{
     email : "johndoe@example.com",
     firstName : "Jane"
}

The existing document with that email address will be deleted and a new one will be created, as follow.

{
     email : "johndoe@example.com",
     firstName : "Jane",
     lastName : ""
}

As you saw, lastName is empty.

Composer

Install Composer on OS X and use it globally

Magento 2 needs Composer, so let install it on OS X in a way it can be used globally.

1 min read

Magento 2 needs Composer, so let install it on OS X in a way it can be used globally.

Considering that installing Composer will create a composer.phar file, and our intention is to use it everywhere, anytime, regardless the project we're working on, I decided to install it (meaning let the composer.phar be created) in /Applications/Composer (it makes sense to me, but you can choose the destination folder you want).

Installing Composer

First thing first, let's go to /Applications, create the Composer folder, and get in.

cd /Applications/
mkdir Composer
cd Composer

Now, we can install Composer for real using cURL.

curl -sS https://getcomposer.org/installer | php

If everything goes as expected we'll get a nice message saying something like "Composer successfully installed to..." and we can proceed to the next step.

Making it globally available

Now that we have the composer.phar file, we need (or want?) to have it globally available by typing composer in the command line. To achieve this let's start by moving our composer.phar file to /usr/bin/.

sudo mv composer.phar /usr/bin/

And finally let's create an alias on our bash profile.

alias composer="php /usr/bin/composer.phar"

Reload the command line profile, and that's all it takes to get Composer on OS X. You can now go to any folder you want and type composer about. If something nice appears it means everything is okay.

I might be skipping the part where I'm supposed to explain how to edit and reload the bash profile. It was on purpose because it always different depending on the terminal you use (for example mines it's located in ~/.zshrc because I use Oh My ZSH!).

You can try the following in order to access and edit the bash profile.

vim ~/.bash_profile

VTEX

What's VTEX Master Data?

A database-ish that works as a CRM data repository where we can find clients' data, orders' information, addresses and more divided into Data Entities.

3 min read

The VTEX Master Data is what the platform offers to look under the hood. There we can find all the clients' data, orders' information, addresses and other kind of data divided into different Data Entities.

The clients's information like first name, email address, identification, phone numbers, if the client is willing to receive newsletter or not, and other information be default or custom is not invisible or totally private for the store owner. On the contrary, it's there to be read and accessed.

Is a database-ish, that works as a CRM data repository too, the deepest you'll be able to sink considering it's a SaaS platform.

Data Entity

The data is separated into different Data Entities based on the nature of the data itself.

We have Data Entities for Clients (CL), Addresses (AD), Orders (OD), Stores (SO) and a lot more but the most important one, yet, it's the one for the Clients.

Each Data Entity has specific attributes. For example, inside CL you can find, among others, the attribute document which type is Varchar 50, attribute firstName type Varchar 50, attribute isNewsletterOptIn type Boolean, and more.

Another interesting attribute type is Relationship. For example, on the Data Entity OD (for the Orders) there's an attribute known as addressId to relate a document from OD, an order, with an address from the Data Entity AD (for the Addresses).

A little lost? Think it's a MySQL database where each Data Entity is a table and the attributes are the fields. What's left it's the manipulating of the data (add new documents, delete existing documents or edit existing ones).

Data Entity's attributes from VTEX Master Data

The attributes have properties too. An attribute can be configured to establish permissions to read it, to edit it or to use it as filter, among other minor configurations.

The power of the VTEX Master Data comes to light when we perform request to it in order to play with the data. In order to do that we generally aim our request to a specific Data Entity with a filter to retrieve the documents that matches that filter (here we use an attribute with permission to be used as filter) and from the results we ask for specific attributes to read the values (we can do that only on attributes that have permission to be read it). If the idea is to edit the documents consider that we can only alter attributes that, as you probably already guest, have permissions to be edit it.

Remember, a VTEX store by default comes with default Data Entities and default attributes. That's not the limit. Do you need an attribute to save the favorite ice cream flavour of the customer?, you can create it.

Locating the data and other information

The best part of the VTEX Master Data is how we can manipulate it (either just to read it or to edit it) using HTTP request to GET, POST, PUT, PATCH and DELETE documents from the Data Entities. But this is not part of this post scope, feel free to check other publications tagged with VTEX Master Data to go deeper on this topic.

The data is also available via web on {store}.vtexcrm.com.br where you can play with the documents, and on {store}.ds.vtexcrm.com.br where you can configure the Data Entities and attributes.

Everything I just described about the VTEX Master Data is just a glimpse of all it can offer. Check the last two URLs in the paragraph above to discover more features.

Front End

How to interview a front end developer and not die in the process

Being an interviewer it's not an easy task as the candidate's chances of getting the job depends not only on the candidate's technical skills but also on the ability of the interviewer to rule on the truth of those said skills in a 60 minutes talk.

5 min read

Being an interviewer it's not an easy task... well, of course it might be harder for the one looking for the job, but the candidate's chances of getting the job depends not only on the candidate's technical skills but also on the ability of the interviewer to rule on the truth of those said skills in a 60 minutes talk.

I started conducting front end interviews about two years ago, probably, and it doesn't became an easy task as days go by. The "interview techniques" and the "tricks or treats" gets better as more interviews I get done, but at the end of that hour of interview I need to walk to my boss and answer one not simple question: Nahuel, should I hire that guy or not?

If No and the candidate's seniority was really high but I couldn't tell during the interview then the company loses a good resource, but if Yes and the candidate's skills wasn't as near as good as I though during the interview then everybody loss time. It's too much pressure!

How to actually interview somebody

There's no answer to how to actually interview somebody, so don't expect to get the answer to life, the universe and everything by reading this post.

You can Google "how to interview a front end developer" and you'll get a lot of techniques. My suggestion is that you should pick the one that makes you more comfortable, start interviewing with it, and then you'll mutate it to fit even better with you personality, your interviewer's skills, and your (or your company) needs.

What I can do is give you my technique, it might help you if you're conducting an interview for the first time.

What questions needs an answer at the end of the interview?

It's necessary to have in mind to what questions you need answers, otherwise the interview it'll just be a talk and you'll get nothing of it.

Will the candidate be able to use the techniques/technologies/programming languages/whatever your company use on the daily basis? In other words, will the candidate be able to do the job you're interviewing him/her for?
How is the enthusiasm or learning skills of the candidate? In other words, how do you think the candidate will handle techniques/technologies/programming languages/whatever the candidate doesn't handle at the moment of the interview but it's required in the work daily basis?

And I have a third question someday Human Resources asked me but I'll save it for the end because of drama.

Evaluating programming skills in a friendly conversation

It's almost impossible, or at least really not accurate by itself.

The interview process doesn't start or end with a face to face interview. In my case it starts when HR says to me that somebody applies for the job position, and I can start evaluating the technical skills of the candidate at that moment thanks to the fact that we as a company ask the candidate for code examples.

That code example is really important for the interview process and helps to evaluate the programming skill of the candidate because it's real life work. It's code they really write for a real job (as long as the candidate it's not lying), so it's probably the job I'll get done by the candidate on his/her first day at the job if I hire him/her (it's a start and the candidate can only improve on that point. Theoretically, very theoretically).

Not always the code send by the candidate helps me. Sometimes they send me a GitHub URL (which is great), a ZIP file (which is nice), or an URL to show a full website they developed (which is sometimes a bummer).

Short story: once somebody send us the URL to a National Geographic website. I can believe you that you code part of it, but since it's a huge projects I know you weren't the only one working on that webpage so it's kind of impossible to know the parts of the code you actually developed.

Back to the code example, I try to get as much accurate as possible the candidate's seniority since he/she won't be able to code something complex during the face to face interview.

Going live: Face to face interview

Tell me about a project you had, any project you want, from the beginning to the end. Starting with the client entering the company and saying "I need this", going through the planning process, the design process, the development process, your relationship with the team, how do you interacted with the back end developers, and the day you delivered the project to the client.

That's how I start the interview. It allows me to detect in which parts of the process the candidate it's involved and what he/she did on those said parts.

As the candidate speaks I can either hook up on specific keywords or write them down to go deep into specific subjects later. Like, "you mentioned the website was responsive, how did you face that requirement?", and then the candidate talks again and I repeat the technique until I have all the data I need.

The hard technical skills during this talk are very hard to detect (that's why we had the code example on the first place), but I get a glimpse of the previous candidate's daily work.

The props during the face to face interview

It's not like I interview hands empty. I know I can't give the candidate a computer and a real JIRA's ticket to code, and it wouldn't be fair to ask the candidate to code something complex with a paper and pencil in front (pff, like I can do it).

Knowing that, I hand over two exercises that can be solve in around 5 minutes: the first one it's a request to use CSS to resolve a simple requirement, and the second one it's a simple logic problem that can be solve with conditionals and control statements (you can use JS, PHP, whatever you want, even pseudocode).

The two exercises can be solve with around 15 lines of code, they're really simple. They don't need to work if I copy them to a computer, it's not what I'm expecting. I want to see how you react and act to a logic problem, I need to know how would you confront this short notice problem.

They are so simple it might not help me to understand how good the candidate can code, but trust me when I say that this exercises rules a lot of people out when I see they can't solve them.

Decision time: to hire or not to hire

Get back to the initial questions and you'll be able to make a decision. Also, as I said before, I have a third question that helps me when I'm not sure if I should proceed with the candidate or not.

Would you work next to that person on a project?

Assume you hire the candidate, would you like to work with him/her?. And don't think you'll be sharing a beer. Would you share a project with the candidate?

Try to answer that and you'll end up saying things like "Well, he's lacking some technical skills but he learns fast so yes" or "Mmm, I think he won't be able to handle the technical pressure of the technologies we use so no". This last question might save the day.

This is what I do, this is what I can share with you. Good luck on your next interview on the other side of the table.