Categories
Desarrollo y Programación

React dar formato a números

Hola, bienvenidos a otro tutorial en esta ocasión con React a dar formato a un número para mostrarlo en pantalla.

Vamos a trabajar en el aspecto visual deseado sin necesidad de cambiar el dato original, es decir meramente vamos a trabajar con la estética del número.

Este material está basado en la información que encontré en este hilo de Stackoverflow.

Para esto dejo el siguiente videotutorial, espero que les sea útil como material de apoyo.

Además dejo el código final en la parte de abajo para que revisen si algo no funciona como debe.

Pueden dejar sus dudas o comentarios en está publicación o en el video, nos leemos en el siguiente tutorial.

Feliz día a todos 😄

Referencias

Categories
Desarrollo y Programación

Como hacer peticiones http en PHP sin CURL

Vamos a hacer peticiones a servicios http o APIs con PHP sin CURL, este último muchas veces está bloqueado por el hosting y no es posible hacer peticiones a enlaces externos.

Vamos a utilizar la librería Requests for PHP en nuestro entorno de desarrollo local, así que es importante tener el manejador de dependencias: composer.

Instalación de Requests

Para instalar la librería es necesario ejecutar el siguiente comando:

composer require "rmccue/requests"

Nuestro composer.json debería verse como la siguiente imagen

composer.json (ejemplo)

Así debería lucir el árbol de dependencias y archivos:

Dependencias

Peticiones HTTP Get con PHP

Y listo a partir de ahora podemos solicitar datos a servicios y APIs externos, yo tuve esta necesidad pues algunos servicios de los que consumo no permiten solicitudes desde el browser.

Peticiones HTTP Post con PHP

Si queremos enviar datos, debemos colocarlos dentro de un array. Es importante conocer el tipo de envío que debemos hacer en post, ya sea para un multipart/form-data o un application/json.

Este dato debemos revisarlo con el proveedor del servicio, si es necesario enviar llaves de autenticación u otro dato en las cabeceras, podemos agregar este dato en otro array.

Peticiones HTTP PUT, PATCH y DELETE con PHP

El resto de peticiones se pueden hacer con los métodos:

Requests::put($url, $headers, $data, $options);
Requests::patch($url, $headers, $data, $options);
Requests::delete($url, $headers, $options);

Status Code y Headers de Peticiones HTTP con PHP

Para obtener el codigo de estado se obtiene de la variable de respuesta:

$response->status_code

En el caso de la cabecera es necesario agregar el nombre de la cabecera requerida. NOTA: no distingue entre mayusculas y minusculas

$response->headers['Date'];

Comentarios Finales

Esta por demás decirlo, pero siempre que importen la librería al proyecto es necesario subirla a su host para que funcione, así que la carpeta vendor ahora debería estar incluida en el servidor.

Las cabeceras de autenticación se envían en el array de $headers, pero se debe consultar con el proveedor del servicio cuales se deben enviar.

Y listo ya no es necesario preocuparse por que el servidor tenga soporte para CURL, que tengan felices proyectos y que todo vaya sin bugs, un Saludo afectuoso y nos vemos en el siguiente tutorial.

Categories
Desarrollo y Programación

Sumar Radio button con Javascript

Este problema lo obtuve de los foros de cristalab del usuario mariassssss, el usuario busca sumar los valores de unos input radio con javascript:

Aquí el post original: http://foros.cristalab.com/javascrip-t122822/

Me tomé la libertad de corregir el codigo, quitar las funciones que no estaban en uso y hacer la operación que necesita sin moverle mucho.

A diferencia del código original no es necesario ir a recuperar el valor por input, si no obtener todo el formulario y sacar los valores necesarios.

Es algo primitivo pero este formData estaría listo para enviar a en una request y obtener los datos a partir de este elemento y sus correspondientes names.

Entre las mejoras se puede poner un array para obtener los datos requeridos, pero como no estaba la problemática descrita, pues decidí omitir.

Categories
Desarrollo y Programación

WebStorm Color Themes – base16 [2019]

Que tal coders, en esta ocasión voy a compartir mi tema de color para el editor WebStorm, reciente el editor entró en la versión 2019.2 cambiando ajustes.

Estos ajustes ahora permiten establecer colores para otras variables, sintaxis y palabras reservadas.

Javascript Class

Mi tema esta basado en los colores de Base16 que pueden encontrar aquí http://chriskempson.com/projects/base16/ y he cambiado mayormente los colores para trabajar con Javascript y react.js

ReactJS Component

Quizá no se vea tan bien como otros temas o schemes pero está listo para trabajar con pantallas muy brillantes, donde a veces el color parece que va a incendiar las pupilas

Node JS

Sin más aquí dejo el enlace al archivo:

Si por alguna razón no funciona, también lo dejo en Google drive:

https://drive.google.com/file/d/1Ef9_o5d2yXP5n7XCncKZs_u5BHs0qfUP/view?usp=sharing

Cómo importar Webstorm color themes

Para importar este o cualquier otro tema, necesitan un archivo *.icls para poder importarlo. Después ir a Archivo > Preferencias > Editor > Color Scheme

Webstorm 2019.x Preferences

Elegir la opción Import Scheme… del icono de configuración, para finalizar elegir el archivo, aplicar y aceptar los cambios. Y listo 😄

Si tienen algún ajuste para cambiar o mejorar el tema compartanlo en los comentarios. Muchas gracias y nos vemos en el siguiente post.

Categories
Desarrollo y Programación

jQuery mostrar y ocultar div con animación

En esta ocasión vamos a mostrar y ocultar div con jQuery para practicar el funcionamiento base de la librería. vamos a asignar eventos a dos botones que nos permitan interactuar con la visualización de un componente.

En esta ocasión traigo la actualización de un código que hice hace unos siete años para este blog, el cual hice un tutorial en youtube:

El código completo y funcional está aquí:

Refactorizar código Javascript

Ahora también tenemos una actualización de un refactor que pueden ver en el siguiente video:

Este último video trata de seguir buenas prácticas para evitar el uso innecesario de variables y agregar nombres legibles a las clases e identificadores de HTML y Javascript.

Si tienen alguna duda ponganla en los comentarios 😎