Danywalls

Life , Coding , Father

I was a very fan of Mavericks OSX, his font was great. Today I found a tool which allows changing the default font.

https://github.com/LumingYin/macOSLucidaGrande

#osx

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'); <h2 v-transparent>1,500</h2>

Directive Events Hooks

The directives contain a few events where we can attach and every one has a stage.

bind(el, binding, vnode) is once directive is attached.

inserted(el,binding, vnode) when inserted in Parent Node.

update:(el, binding, vnode, oldVnode) when an update happened in the component.

Object configuration

The el represents the “element” in our HTML with the directive and using the event hook bind it can change or modify the behavior of the HTML element.

<h2 v-transparent>My Power</h2>

Vue.directive('transparent', { bind(el,binding,vnode) { el.style.opacitiy = "0,5"; } });

Passing parameters

The binding is an option to send values from the element to the directive.

<h2 v-transparent="0.1">1500</h2>

Vue.directive('transparent', { bind(el,binding,vnode) { el.style.opacitiy = binding.value } });

Passing arguments

binding.args allow to get arguments from the element and use it to change the behavior.

<h2 v-transparent:es="0.1">1500</h2> Vue.directive('transparent', { bind(el,binding,vnode) { el.style.opacitiy = "0,5"; if(binding.arg == "es") { const formated = "€${el.textContent}" el.textContent = formated; } } });

So there you have it, I have shown you how to create directives and use them. Now go use this newfound knowledge to make something amazing.

https://jsfiddle.net/danyparedes/vcnLpu1r/

#vue

Vue allows design and manipulates forms elements fast and easy, these are the most common task when we are building formulary.

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 modifiers .lazy, .number and .trim

Change the input value on the change event instead in each keystroke. <input type="text" v-model.lazy="username"/>

Force the input cast his value to number. <input type="text" v-model.number="age" />

Remove empty spaces. <input type="text" v-model.trim="secretkey" />

Checkbox

Show a list of checkboxes and store his values into an array.

<input type="checkbox" value="lakers" v-model="adsList" /> <input type="checkbox" value="sixers" v-model="adsList"/>

Radio buttons

Show a few radio button options and only allow the user to pick one option.

<input type="radio" value="weekly" v-model="frecuency"/> <input type="radio" value="monthly" v-model="frecuency"/>

Get the selected value into a dropdown.

<select v-model="selectedAccount"> <option v-for="acc in accounts" :value="acc.id">{{acc.description}}</option> </select>

Submit forms

This isn't linked with the v-model but is a common task when we work with HTML forms, prevent submit forms to be processed with Vue.

<button @click.prevent="savePreferences">Save</button>

#vue

Sometimes I want to find an easy way to handle HTTP errors. Using Axios interceptors, we handle requests and response 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) { return response.data; }, function(error) { EventBus.$emit('error', 'sorry try more later'); return Promise.reject(error); });

Into the Vue instance, the eventBus is registered to listen to the error event and be handled, using $message from ElementUI it can show a fancy error into page.

let app = new Vue({ el: "# app", created() { EventBus.$on("error", showerror); }); }, methods: { Showerror: (msg) { this.$message({ message: msg, type: "warning" } } } });

#vue

You are reading the third part of Create Rest API with Express, feel free to read the Part 1 and Part 2 In this part, I will send a request to the POST method using Vue.

Add form to send data.

The first step is to include the CDN to index.html for a little styling. The HTML contains a form with input and textarea element linked to Vue. We use v-model and the v-on directive to liest to form submit.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <title>Document</title> </head> <body> <div id="app" class="container"> <div class="row"> <form v-on:submit="sendToApi"> <div class="form-group"> <label for="title">Title</label> <input id="title" v-model="title" class="form-control" type="text"> </div> <div class="form-group"> <label for="description">Description</label> <textarea id="description" class="form-control" ></textarea> </div> <input class="btn btn-primary" type="submit" value="Send to API"> </form> </div> The method sendToApi() will send the data from our app to the API.

Read more...

You are reading the second part of Create Rest API with Express, feel free to read the Part 1 for continue, in this case I will build a simple client with Vue for getting the list of documents from our API.

Create my app with Vue.

The only goal of this application is to get the answer and show them into the ul.

The first steps are into the index.html are include the CDN link for Vue, Axios, and vueapp.js file.

The code HTML contains a div with id 'app' to be used by Vue and also the v-for directive to iterate into the documents array property.

<body> <div id="app" class="container"> <ul> <li v-for="d in documents">{{d.description}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="vueapp.js"></script> </body> The App have into data area the APIurl property, the documents property array and the method getDocuments().

Read more...

Today I wanted to create my own REST API using express, some friends told me about Express is allow create stateless APIS quick and easy and support HTTP verbs to able communicate with our resources getting the responses in JSON format.

Prerequisites

This is what you’re going to need in order to follow along with this example:

– Node.js and npm installed on your machine; – A basic understanding of Javascript;

Once that stuff is out of the way, we can proceed.

Configure my project and Install express

I will to configure my project with Node and install express and also use nodemon which allows run node code and refresh for every change, to do so, head over to the terminal and run this:

npm install -g nodemon npm init -y npm install -s express

Create the server for listen the requests.

Next point I create a file named expressapp.js, import express, create const which store our express instance, and call the method “listen” to start our server and get requests from the client.

Read more...

I love to find fonts for coding, write or read this is my top 3 fonts most used fonts for coding.

#fonts #coding

Every day we want to create beautiful apps, but we don't have time to create great interfaces. This kind of situation can be resolved using Angular Material.

The Angular Material is a node package created by Angular Team members. Using Google Material behavior and animations. It brings with some angular components ready to use.

Adding Angular Material

Be sure are you using the last version of @angular/cli. This allows creating apps quickly if you don't have any app already created, feel free to create one.

danyiMac:lab$ ng new myexampleApp

The ng add command allow install and configure our project with Angular Material

danyiMac:lab$ ng add @angular/material

What did ng add for me?

Read more...

The components in React allow receive data using Props, the props aren't is strict, that's mean you can send any type of value, or forget to send some value.

In our example, the component Calculator needs 2 props number1 and number2.

import React, { Component } from 'react'; export default class Calculator extends Component { render() { const { number1, number2 } = this.props; let total = number1 + number2; return ( <div> <input type="text" value={number1} /> <input type="text" value={number2} /> <span>{total}</span> </div> ); } }

We are sending a string value instead of a number and forget the second number.

import Calculator from './components/Calculator'; class App extends Component { render() { let edgar = 'The Wall'; return <div className="App"> <Calculator number1={edgar} /> </div>; } }

How we can manage this problem ?

Read more...