I moved to Toronto this year, and I had the amazing opportunity to attend to one of the biggest Vue Conference, the VueConfTO 2019 . It was a wonderful experience, I meet in person some of the greatest contributors to the vue ecosystem and learned a lot from their presentations. This was a very multicultural event, there were participants that came from all around the world, E.g.: China, India, UK, Turkey, Sweden, Mexico, Spain, USA and many more. The conference venue was in an extraordinarily convenient place, in downtown Toronto at the Marriott Downtown, in case any participant would want to explore a little bit more of Toronto, the main attractions/places were nearby. The conference lasts 3 days, it included workshops, presentations, contests/quizzes, meals, after party, and a Q&A session with the core team. The MC of the event was Phil Hawksworth who entertain us during the whole presentations with some really funny jokes interacting with the crowd and the s...

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  mejiamanuel5 / 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  deploy.sh  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 'yourcustomdomain.com' > CNAME #cd - # deploy echo Depl...

Photo by Kevin Richardson 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 is   What 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 d...

Do you need a simple Vue.js Google Sign-in button solution?  Stop searching, I have the right  npm package for you. vue-google-signin-button-directive 🔐 A simple Vue.js  directive to include  [Google Sign-In Button]  behavior in any component. Installation and Usage are explained in the Github repository: https://github.com/mejiamanuel57/vue-google-signin-button-directive Collaborate by simply leaving a comment here or open an issue on Github. I hope this saves you some time and clicks.😀

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 👍: 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  Vue.js  is running with h ot 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 sa...

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 costs, 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 ...

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...

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...

If you are using any client-side framework like  Vue ,  Angular ,  React   and 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( ...

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 simulates a fight in 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 develope...