Posts

Latest post

Boilerplate: VueJS + ASP.NET MVC 5

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

https://github.com/mejiamanuel57/Boilerplate-VueJS2-ASPNETMVC5

Let's make this run:

1) First, clone the repository
2) cd VueJS2-MVC5
3) npm install
4) npm run dev...And the VueJS 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 VueJS and ASP.NET MVC:

1) Go to the windows  running the VueJS 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 working…

Clean Code, even under pressure

Image
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 VueJS with my coworkers

Image
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 VueJS 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 onl…

Material Design guidelines,The Lighthouse

Image
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

Image
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.  myapp.com/about, myapp.com/account/user etc...

By default, the server only recognizes the root (/) and if you try to refresh the page (f5) or enter directly the URL myapp.com/about  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

Image
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

Image
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 $"apps…