Latest post

GitHub Pages + Vue CLI 3

In this post, I will show you how to run your Vue CLI 3 project on GitHub Pages in a few simple steps. GitHub Pages is ideally for your personal website, documentation, demos, or your wife's website 😊 ... basically, any static project that you want to display to the world quickly.

For the purpose of this tutorial, I will be using /gh-pages-vue-cli-3 a project that I created for a better demonstration. You can clone my repo, use your existing Vue CLI 3 project or create a new one. If you don't know how to create one, this guide can help you.

Ready? let's start:
1) At the root of your project create a file called and add this script:# abort on errors
set -e

# build
echo Linting..
npm run lint
echo Building. this may take a minute...
npm run build

# if you are deploying to a custom domain add a CNAME (uncomment the next 3 lines)
#cd docs
#echo '' > CNAME
#cd -

# deploy
echo Deploying..
git add -A
git commit -m 'deploy'
git push -f h…

Get comfortable with being uncomfortable. (Learning technique)

We, as developers, very often feel overwhelmed with the amount of frameworks/tools/libraries/paradigms getting out so fast, especially if you are working in the web development industry.

To have a job from 9 to 5, spend time with your family, have time for your hobbies, maybe work in a side project, and also stay up-to-date with the latest technologies, is extremely hard, and guess what? that's pretty normal in our profession. You have to stay tuned to the latest technologies, you can't keep away from that. Consequently, you will be in the uncomfortable zone of being exposed to new knowledge, again and again.

So many questions come to your mind, but the biggest one isWhat can I do to stay relevant and avoid to die trying? I have also made that question to myself and after some failed attempts, a simple technique has given me some amazing results and I hope it works for you too.

Warning: with the next technique I don't pretend to make you  a guru in any technology, but how to …

Vue.js Google Sign-In button

Do you need a simple Vue.js Google Sign-in button solution? Stop searching, I have the right npm package for you.
🔐 A simple Vue.js directive to include  [Google Sign-In Button] behavior in any component.

Installation and Usage are explained in the Github repository:
Collaborate by simply leaving a comment here or open an issue on Github.

I hope this saves you some time and clicks.😀

Boilerplate: Vue.js + ASP.NET MVC 5

If you need to start as soon as possible with a project using Vue.js 2.0 and ASP.NET MVC 5, here I bring you a light Boilerplate/Template with the minimum setup 👍:

Let's make this run:

1) First, clone the repository
2) cd VueJS2-MVC5
3) npm install
4) npm run dev...And the Vue.js is running with hot reloading on port 8080

Now let's go to the server-side:

1) npm run build to build the web project "for production use"
2) Open the solution in Visual Studio
3) Make sure to run the web project on http://localhost:54490

4) Press F5 and another window will open showing the built project on port 54490

Test the connexion between Vue.js and ASP.NET MVC:

1) Go to the windows  running the Vue.js project on http://localhost:8080/
2) Click on the button "Go and test the backend"
3) If the result says: "You have reached the backend", everything is working

That's all 🚀

If you want to know how this project is wor…

Clean Code, even under pressure

We all have been in the position at work when the pressure comes, and delivering on time is a "life-or-death situation". There are a lot of factors that influence a bad project planning like wrong time estimation, workload distribution, team choice, etc...and maybe it will happen more than once, after all, we are humans and we are really bad forecasting.

Certainly, nobody wants to work under pressure, we can't think clearly,  we try to work faster, making more mistakes than in a normal situation, it sucks I know. In those moments we tend to focus more on delivering at all cost, even sacrificing our reputation...and that's why I wanted to write this post.

Keep in mind, when you are coding, maybe alone or within a team, you are building something to solve a problem, it doesn't matter how big or small it is, I'm pretty sure that problem will evolve over the time. Having said that, more and more code will be written. This code should be maintainable over the time, …

My experience adopting Vue.js with my coworkers

This year I had the opportunity to lead 2 projects at work, one was an API for the company's Mobile App and the most recent one was a Web App, this last one was the most joyful for me and I want to share my experience adopting Vue.js with my coworkers in this project.

Prior to the projects, I assigned a task to the team, "choose a JavaScript Framework" to use in our future projects based on 3 simple criteria:

1) Learning curve 📚 2) Speed 🚀 3) Documentation 📑
Maybe there are better criteria but I didn't want to overwhelm the team with a bunch of trivial ideas of how to choose the best JS framework, and we had to start with something as soon as possible. Also, my team was really worried about 2 hidden criteria:

1) Experience among the team member in any JS framework to be adopted.
We were going to face new concepts, paradigms, technologies, therefore we wanted someone who could guide us during the process which is normal when you're facing new things. There were on…

Material Design guidelines,The Lighthouse

Probably, you have been hearing about Material Design for a while and yes it has been with us since 2014. Also,  you have seen it in almost all the Google Apps on your phone and desktop.

But... what really is Material Design and why should you take advantage of its guidelines?

Well, in a nutshell, Material Design is the way Google describes the best practices of how your object and everything on your app should look and feel. This whole thing about Material Design comes after years of study of how users react to the different interfaces in different apps.

Now, the real question is, what are the advantages of reading the Material Design guidelines?

Sometimes frontend developers and UX/UI designers meet the problem of how an app should look like on some point of the user interface development and some questions that come to mind  are:

Should be this button here? Is this notification in the right place?What can I show when I perform an action in this part? Is my combination of colors rig…

.NET Core handling Client-Side Routes

If you are using any client-side framework like VueAngularReactand so, you are probably doing client-side routing which is letting the browser handles the routes E.g., etc...

By default, the server only recognizes the root (/) and if you try to refresh the page (f5) or enter directly the URL  you will get 404 ERROR because you are sending an HTTP request to the server in the route /about,  but your server doesn't handle routes different from (/).

To solve this problem I found a really nice approach which is a simple fallback handler in the Startup.cs of our .NET Core app: 

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { ....Your configuration app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); //handle client si…

Improve your skills as developer with Code Katas

Maybe, the first thing that comes to your mind when you hear the word "KATA" is a movie of Bruce Lee or maybe, the movie Kung Fu Panda 😛. According to Wikipedia Kata is: 
"Japanese word, are detailed choreographed patterns of movements practiced either solo or in pairs. The term form is used for the corresponding concept in non-Japanese martial arts in general."
In other words, a set of movements very well synchronized which simulate a fight in the real life, and the more you practice those movements, the better you become at fighting.
But....we are going to talk about Code Kata, instead of practicing how to kick and throw punches, we are going to practice by writing some beautiful code.
The first time I heard the term "Code Kata" was in the book The Clean Coder by Robert C. Martin, but the original term was credited by Dave Thomas in his book The Pragmatic Programmer.I recommend them both in my post Books you must read as a developer.
What is Code Kata? It…

Web.config no longer exists in .NET Core

I thought to write a post about my journey making projects with .NET Core but that will be a long post and maybe nobody will read it; instead, I will make a series of posts with some topics I found interesting to talk about.

Many of us come from ASP.NET 4 and old versions, we used to work with Web.config in our web projects, a file to place our settings in XML format, but it no longer exists in .NET Core (or at least in our Solution Explorer).

In .NET  Core we use appsettings.json to place our settings in JSON format. Let's see how this works by getting our hands dirty:

1) Create a .NET Core Web Application project:

You will see a bunch of files generated from the template in the Solution Explorer. appsettings.json is meant to replace settings previously located in Web.config . To catch these configurations in the project, the Startup.cs file has the following lines:

As you can see the appsettings.json file is added to the ConfigurationBuilder. Also, pay attention to the $"ap…