Testing promises with Mocha.

In my post about testing with Mocha, I forget a common task in every javascript developer, “the promises”, it is a common task for making our code run async, but how I can test it ?. Feel free to read the code on Github or continue reading. I will write a method that returns a promise and we will…

React Router in 3 minutes

Implement routing into a React app is so easy, the first step is to install react-router -dom package. npm i react-router-dom In the App.js import 3 essentials elements BrowserRouter, Route and Switch from react-router-dom, these handle our routes, create links and load components. import { BrowserRouter as Router, Route, Switch } from “react-router-dom”; Every one…

Gatsby, StaticQuery, and PageQuery part 3

Today is my 3rd day with Gatsby, if you read my previous post about GraphQL, I had a pending task bind the data from GraphQL using StaticQuery component and query in Pages. StaticQuery is used to connect our components with GraphQL, it can wrap all component and bring access to the query result. Page Query is const with the GraphQl…

Graphql and Gatsby part 2

I found that Gatsby uses GraphQL for sending data through to components, that means that understanding how GraphQL works in Gatsby is a must. Gatsby comes with a GraphQL’s web IDE for executing and testing our queries. When we run gatsby develop, this runs an instance of GraphQL IDE at http://localhost:8000/___graphql. You can also use this…

Starting with Gatsby part1

Gatsby as a React GraphQL and static site generator with easy development and amazing fast finish product that allows delivering faster websites. It comes with React, React Router, Webpack, Graphql and also it takes care of service workers, server-side rendering, code splitting, image loading and more. I’m motivated to start learning Gatsby and to use…

Vue Router in 3 Minutes

The router is one of the important topics when we build single-page applications with Vue, there are a few things that I wish to know to begin and really helped me get basic tasks with VueRouter. I’m going to assume you’re already working with Vue and want to start to use VueRouter in your existing…

Kill code duplication using mixins in Vue

When we had the same code in two o more components it is a signal or smells that something is wrong, then the Mixins come to help us. The mixins allow share data, behavior, and events between components or Vue instances easily, reducing code duplication. I will give you an example, we had 2 components…

How to create a custom Vue directive

Vue allows create custom directives, modify our HTML elements and behavior, you can recognize easy because the first letter is v- like v-text or v-html. Create a Directive The directives can register global or scoped. Every directive needs the name as the first parameter and object configuration as the second parameter. Vue.directive(‘transparent’, { }); Directive Events Hooks The…

Working with v-model and forms

Vue allows design and manipulates forms elements fast and easy, this is the list of the most common task when we work with HTML forms. Binding Input Use: or v-bind into value property can help you to bind data into the HTML input or use the v-model directive. <input type=”text” :value=”username”/> <input type=”text” v-model=”username”/> Using…

HTTP errors with Element UI and Axios.

Sometimes I want to find an easy way to handle HTTP errors. Using Axios interceptors, we handle requests and responses before the then or catch. I will create a Vue EventBus instance to communicate my interceptor with the app and emit an event when some error happened. const EventBus = new Vue(); axios.interceptors.response.use( function(response) {…