DEV Community: Manuel Mejia

Key people to follow in the Vue world

Manuel Mejia — Wed, 22 Jan 2020 18:40:00 +0000

For me, one of the small hacks to keep me posted with the tech/tools that I love is to follow the contributors or creators on Twitter. I like to read about what they're thinking, what they're working on and what are the next improvements for the tools. I even like to see their favorite memes 😆. So I encourage you to start this 2020 with the right foot following some brilliant people that are contributing to the Vue.js ecosystem in different ways:

Evan You

twitter: @youyuxi

Yeah, let's start with the creator. Evan has been working with Vue.js since 2014, and right now he's the biggest contributor, dedicating all of his time to the framework. On his Twitter account, you can find thoughts about the next steps of Vue.js and sometimes you can find tweets about UFC 🥊.

Eduardo San Martin Morote

twitter: @posva

Eduardo is part of the Vue Core Team, he's focused on the vue-router. Also, Eduardo is the creator of vuefire, a solution to create real-time bindings between Firebase and your Vue application. He tweets really interesting info about vue/vue-router, next conferences and a lot of memes, really funny memes 😁.

John Leider

twitter: @zeroskillz

John Leider is the creator of Vuetify, the most used Vue UI Library. On John's twitter, you can find updates about Vuetify and the next conferences where he will be participating ✨.

Filip Rakowski

twitter: @filrakowski

Filip is the co-founder of VueStorefront, a headless PWA frontend for eCommerce and the StorefrontUI author, a UI framework. He writes really useful posts about performance and best practices on vueschool.io/articles/. Stay tuned with his latest tweets 🛒.

Chris Fritz

twitter: @chrisvfritz

Vue consultant, and member of the Vue team. Chris helps a lot with the vue documentation on vuejs.org, also, he loves to share tips about Vue app at a large scale (vue-enterprise-boilerplate) 📄.

Jen Looper

twitter: @jenlooper

Jen is a developer advocate at Microsoft. In 2018, Jen created VueVixens.org, a cool community to teach Vue.js to under-represented people. Go and follow Jen to know more about this wonderful community 🦊.

Guillaume Chau

twitter: @Akryum

Member of the Vue Core Team, he focuses on vue-devtools, vue-cli, and vue-apollo, tools that will make you work like a wizard. On his twitter account, you can find information about the latest vue tool updates, next conferences, and other interesting things 🧙.

Alex Kyriakidis

twitter: @hootlex

Teacher and co-founder of Vue School, one of the biggest Vue learning platforms, also the author of The Majesty of VueJS. Follow him to know more about the latest courses and I promise you will learn a lot 👨‍🏫.

Sébastien Chopin

twitter: @Atinux

Creator of the famous web framework for building Vue.js apps, Nuxt.js. Follow him to stay tuned with the latest Nuxt updates and conferences 💡.

Sarah Drasner

twitter: @sarah_edo

Head of DX at Netlify and a member of the Vue Core Team. Sarah has helped with the documentation on vuejs.org and with the vue-vscode-snippets which is widely used by developers working with Vue.js on VS Code. Do you like CSS animations? well, she has some incredible projects on codepen.io 🌟.

Michael Thiessen

twitter: @MichaelThiessen

Michael is a developer working on Vidyard, a video platform created with Vue.js. On his Twitter account, he shares the journey of this startup, tips for creating reusable components, and other interesting stuff. Don't forget to check his blog michaelnthiessen.com 📺.

Maria Lamardo

twitter: @MariaLamardo

Front End Engineer at Pendo, also a member of VueVixens.org. She is focused on sharing knowledge about Accessibility (a11y). Follow her to know more about the next conferences and meetups ♿.

That is my top list, but there are other really interesting people to follow like:

Maya Shavin - @MayaShavin
Ben Hong - @bencodezen
Natalia Tepluhina - @N_Tepluhina
Damian Dulisz - @DamianDulisz
Sarah Dayan - @frontstuff_io
Phan An - @notphanan
Gregg Pollack - @greggpollack
Pooya Parsa - @_pi0_
Amir Rustamzadeh - @amirrustam

I hope you find a lot of useful information by following these amazing people. Share in the comments other twitter accounts that we should be following and stay tuned!

GitHub Pages + Vue CLI 3

Manuel Mejia — Mon, 28 Oct 2019 21:11:00 +0000

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 Deploying.. 
git add -A 
git commit -m 'deploy' 
git push -f https://github.com/mejiamanuel57/gh-pages-vue-cli-3.git master

Substitute mejiamanuel57 with your GitHub username and gh-pages-vue-cli-3 with the name of the repo you are pointing to. This script will lint, commit and deploy your code to GitHub.

2) In your package.json, change your "scripts": section for this:

"scripts": { 
 "dev": "vue-cli-service serve --open", 
 "build": "vue-cli-service build --dest docs", 
 "lint": "vue-cli-service lint", 
 "deploy": "bash deploy.sh" 
}

Now your output directory for the "build" will be docs (We will use this directory in GitHub Pages later) . Also we have added "deploy": to run the script from step 1.

3) At the root of your project create vue.config.js and add this configuration:

module.exports = { 
 publicPath: process.env.NODE_ENV === 'production' ? '/gh-pages-vue-cli-3/' : '/' 
}

Substitute gh-pages-vue-cli-3 with the name of your repo. This will tell to GitHub Pages where your public path starts.

4) Now, in your terminal run npm run deploy to build and deploy.

5) On GitHub go to your repo -> settings -> GitHub Pages - > Source and select master branch /docs folder

🌟Bonus: if you want to improve the SEO and routing of your Vue project, add the prerender-spa-plugin package:

1) Run npm install -D prerender-spa-plugin

2) Change your vue.config.js for this:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/gh-pages-vue-cli-3/' : '/',
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== 'production') return

    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'docs'),
          routes: ['/', '/about'],
          minify: {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            decodeEntities: true,
            keepClosingSlash: true,
            sortAttributes: true
          },
          renderer: new Renderer({ headless: true })
        })
      ]
    }
  }
}

Substitute gh-pages-vue-cli-3 with the name of your repo and use routes: [] to add the routes of your current project.

Note: if you are going to use a custom domain (www.mydomain.com) remove or comment the publiPath line:

publicPath: process.env.NODE_ENV === 'production' ? '/gh-pages-vue-cli-3/' : '/',

3) ....and run npm run deploy in your terminal.

That's all, enjoy your Vue project hosted on GitHub Pages with SEO optimization.👍

Source of the project.

I hope this post help you. If you have any question please, leave a comment, also stay tuned for the updates about how to run a Vue CLI 4 project on GitHub Pages.

Originally published at blog.manuelmejiajr.com

Get comfortable with being uncomfortable. (Learning technique)

Manuel Mejia — Fri, 04 Jan 2019 18:48:00 +0000

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 don't pretend to make you a guru in any technology, but how to make you get the necessary/basic knowledge. Having said this, keep reading. 😀

Let's start with this easy math, a year has 12 months which are 365 days, what if you could use 1 day per month to learn 'X' technology that has been in your mind but you keep telling yourself that you don't have time for it or you simply got the feeling of getting lost in the process of learning it. Yeah, it's just one day of only 6 hours. Hence, at the end of the year, you will have 12 new pieces of knowledge and you only have spent 0.82% of the total time of 1 year.

First, make your list, for now just select 12 things you would like to learn. Example:

Node.js
Travis CI
GraphQL
Docker
React
Webpack
Jest
... and so on.

Second, for each technology that you want to learn, follow this path:

Read 1 or 2 articles about it, the best practice, pros, cons, etc.. (1 hour)
Watch 1 or 2 videos about how to use it. (1 hour)
Start a small project where you can learn by DIY, something shorter than a To-Do List app. (4 hours)

The time could vary from one technology to the other, however, the whole point is to spend at least 6 hours to gain the knowledge. Some technologies will require more time to learn it, although, in most of the cases, this should be enough. Another thing to keep in mind, 6 hours of learning will not make you an expert in 'X' technology but you will grasp the basic concepts and will know how to implement it in any project for professional or personal purpose.

It could also happen to you; you start learning something but you really don't feel the "ok, I got it" moment. The secret here is to keep reading/watching/playing until all that exposure to a new concept puts your mind to work like if you were solving a puzzle. In the end, you will say "that wasn't hard after all".

In this new year, let your fears out and start getting comfortable with being uncomfortable.

To conclude, I will let you this amazing Will Smith's video talking about fear, enjoy.

Clean Code, even under pressure

Manuel Mejia — Mon, 09 Jul 2018 15:35:00 +0000

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, therefore, setting rules, design patterns, and conventions are a "MUST".

A strong recommendation is to start wrapping all these settings before writing the first line of code because it will be very difficult to clean the mess later. Some examples of simple things to define at the beginning are:

Name conventions for variables and functions (Pascal case, Camel case, etc..)
Curly braces format, find some wise advice here
Line length (horizontal line of code), this questions of SO it's an interesting starting point
Indentation style, here you have some examples

Alternatively, and my preferred one, you can set up a linter (a tool that is used to mark the source code with some suspicious and non-structural) and set the rules for the whole team, that will force each member of the team to respect the rules. However, a linter will not help you to write rational algorithms and data structures. For this, I highly recommend you to read this set of books especially the Bob Martin's choice and long hours of code.

Also, we could be forced to skip all these rules and conventions to start working right away, but no! stop right there and take couple of hours to set the rules, this will save you a lot of time in the future. Nobody wants to deal with your messy work. After all, it's your code, your responsibility, your reputation. Be aware of all the possible consequence this could trigger, from a bad recommendation for a new position or job opportunity to the unpleasant experience of work with you. I'm sure you don't want to be on that situation, hence "Clean Code, even under pressure".

"To leave the world better than you found it, sometimes you have to pick up other people's trash."

-Bill Nye

Material Design guidelines,The Lighthouse

Manuel Mejia — Mon, 08 Jan 2018 14:06:00 +0000

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 right?
etc.

Material Design guidelines can help you to take those ambiguous decisions by telling you where and what you have to place in your app to make it more intuitive. Let me give you some examples of DOs and DON'Ts:

Dealing with Colors:

Positioning floating button:

Showing messages:

For each component of your UI they give you examples and an explanation of how to use it, components such as: Data tables, Cards, List, Menus, Tooltips, Buttons, etc. Like a lighthouse which guides the ships through the night, Material Design will give you the right orientation, a huge help for the non-designers skilled developers.

So don't skip it and give it a read. It will save you a lot of time and will make your app more intuitive for the users, I assure you.

See also the Material Design implementations for your framework:

material-ui.com - React

vuetifyjs.com - Vue

material.angular.io - Angular

Improve your developer skills with Code Katas

Manuel Mejia — Sat, 02 Sep 2017 23:59:00 +0000

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's a code challenge focused on improving skill and technique. Katas come in different ways, some train programming fundamentals, while others focus on complex problem-solving. You can also find katas with mathematic problems, data structure, games, design patterns and puzzles, meant to test your creative problem solving, while others are based on real world coding scenarios. You can do it alone, in a pair or in a group, I love to do it in a group because you can see how others approach the same problem in a different way.

Why Code Katas are important for any developer?

Let me answer this question with another question: How do you get to be a great runner or great tennis player or great musician? Yeah, you got it, the simple answer is by practicing. It helps to have talent, it helps to know the theories behind... but to be a great developer you need to practice to enhance your code skills. As Robert C. Martin says, it's not enough code from 9 AM to 5 PM in your workplace, to be a great developer you also have to code in your home. Practicing is the key. Therefore, when you are facing a problem in your work or in a side project, you will know which technique suits better for that problem, because you practiced already in a similar kata.

Where can you practice your Code Katas?

There are many pages where you can improve your code skills, right now I'm using with my friends codewars.com, we set 1 or 2 katas weekly and after everyone finishes it, we compare and give a feedback to each other. I invite you to try it out, you won't be disappointed.

If you are new doing katas and you want to use codewars.com, I recommend you to start with the low-level difficult katas (Kyu 8) and then select the more difficult ones as you progress:

Here is a list of coding competition/practice sites if you want something different from my recommendation.

I will end up with a paragraph from a post of Jeff Atwood, co-founder of Stack Overflow :

" It's an important distinction. I may drive to work every day, but I'm far from a professional driver. Similarly, programming every day may not be enough to make you a professional programmer. So what can turn someone into a professional driver or programmer? What do you do to practice?..."

Books you must read as a Developer

Manuel Mejia — Tue, 11 Jul 2017 18:11:00 +0000

The title says "Must" but in fact, this is my recommendation for you as a developer. The following books changed my vision and the way I work, this took me from having spaghetti code to a more structured and easier to maintain code base. Also, helped me to improve my way of thinking in front of certain circumstances. Let's start:

The Clean Coder by Robert Martin

Before I talk to you about the book itself, let me explain to you shortly who is the author: Robert Martin a.k.a. Uncle Bob has been writing code since 1970, he is one of the writers of the Agile Manifesto which defines better ways to do the whole development cycle. He is one of the most influential authors in OO programming.

The book "The Clean Coder" talks from the perspective of his experience, as I said before he has been coding since the 70's, a lot of time on the keyboard as you can imagine. The main point of this book is not to show you how to write good code per se, but how to manage certain situations like:

Project estimates
Best time to write code
When to say NO
About working with a team
Practicing to be a better developer

Furthermore, the book touches other topics very interesting in my opinion and easy to read. In each chapter, he starts making a story of his experience and what you have to do if that happens to you. You will feel identified with some chapters and scenarios that you live on your daily basis. The book is very short with no more than 200 pages....I really recommend you to read it.

Clean Code by Robert Martin

In this book, Uncle Bob talks about how to write "beautiful" code, he will focus on how you have to standardize the way you code, no matter if you are working on a team or working alone. In my opinion, this should be treated as the "Bible" for the developers. I'm sure you have worked in projects where you see there isn't any standard: variables with meaningless names, duplication of code, death code, functions that don't really do what the name says should do and so on.

No matter if you have 2 months developing or 10 years, I recommend this book for any level. Give it a try and then thanks Uncle Bob.

The Imposter's Handbook by Rob Conery

If you want to refresh your memory or take a deep dive into some developer content you probably have heard but you haven't paid too much attention, this book is for you. As the title says "Imposter", the author explains why he wrote the book, because of the Imposter Syndrome that affects most of the developers. This book is also highly recommended if you are going to have a job interview.

The pragmatic programmer by Andy Hunt and Dave Thomas

This book is a little bit similar to the Clean Code, but with other topics that Uncle Bob doesn't touch. This book was the recommendation of one of my professor from my university. The book doesn't only show you theories but also includes a lot of materials for practicing.

I really like the content but honestly, I didn't do the exercise, if you want to get your hands dirty, this is for you. Take a look at the content table: https://pragprog.com/the-pragmatic-programmer/extracts/toc

*Cracking the Coding Interview * by Gayle L. McDowell

Every developer has been through the process of an interview to get a new job and as we know sometimes it could be a difficult time. Because of that, it would be a great help some advice from someone with more experience. Gayle L. McDowell will give you some tips on how you have to prepare for that interview, the material you should study, the dress code you have to wear etc... Also, she gives you 189 programming interview questions to practice. Her experiences of interviewing come from the big tech companies such as Google and Apple.

This is my short list, hope you like it and get the best of them. If you have others recommendation, let me a comment below.