junio 2019 - INGENIO HOSTING

Archives for junio 2019

BEM

BEM – Block Element Modifier es una metodología que lo ayuda a crear componentes reutilizables y compartir código en el desarrollo de aplicaciones para usuario.

web oficial:

http://getbem.com/

 

http://atomicdesign.bradfrost.com/chapter-2/

 

El código CSS tiende al caos cuando se trabaja sin un concepto rector para su ordenamiento. ¿Cómo mantener código CSS ordenado y de fácil mantenimiento?

Cuando del lenguaje de presentación de la WWW se trata, mucho se habla de las nuevas características de CSS3 en cuanto a sus propiedades —gradientes, sombras, transparencias, etc— pero se presta poca atención a cómo ordenar el código CSS en proyectos grandes.

El problema

Es muy común cuando se diseña la interfaz de una webapp, por ejemplo, que los archivos lleguen rápidamente al orden de las miles de líneas de código.

No somos máquinas: lidiar con archivos que contienen miles de renglones de texto técnico es un problema que dificulta nuestro trabajo, complicando los tiempos y en desmedro de la calidad del producto final.

Incluso cuando trabajar con archivos kilométricos pueda ser viable para algunos, esta situación se vuelve en contra cuando debemos compartir el código con nuestros compañeros de trabajo, o incluso con nosotros mismos a futuro!
Tomar un proyecto dentro de un mes y encontrarse con este lío puede ser catastrófico.

Otro gran problema es la repetición de código, por lo general el trabajo sin una estructura de organización genera la necesidad de incluir el mismo código en varios lugares. Recordemos que en ningún caso es conveniente la repetición de código.

Una solución: OOCSS

Los programadores se han estado enfrentando a este tipo de problemas durante años. Existen muchos paradigmas para la generación de código y la lógica de un programa: uno de ellos es la Programación Orientada a Objetos (OOP, por su sigla en inglés).

Este método de trabajo permite la fragmentación de un proyecto grande en unidades mínimas (los mentados objetos), cada una con sus propias responsabilidades.

Lo mismo puede hacerse con el lenguaje CSS, de forma tal que el código pueda ser reusable.

Verán cómo el siguiente ejemplo plantea la repetición de ciertas propiedades y valores de CSS (algo que preferimos evitar).

#button-big {
font-size: 24px;
font-weight: bold;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}
#button-small {
font-size: 16px;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}

Ambos botones comparten gran parte del código, lo que podemos hacer es fragmentar las propiedades de forma más inteligente y aprovechar una gran ventaja de las clases: un mismo elemento de HTML puede tener varias clases aplicadas al mismo tiempo.

Aquí el resultado final:

.button {
font-family: Arial, sans-serif;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}
.button.small {
font-size: 16px;
}
.button.big {
font-size: 24px;
font-weight: bold;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}

De esta manera, minimizamos el código repetido, y nos permitimos el agregado de mayor cantidad de botones a futuro. Por ejemplo, podríamos agregar un botón rojo para situaciones de peligro.

.button.danger {
background: #d00;
}

Si quisiéramos incluir un botón de peligro (rojo), que además fuera grande, aplicaríamos las tres classes en el HTML:

<a href="#" class="button big danger">Cuidado!</a>

Como se ve, el nuevo código es completamente modular 🙂

BEM

BEM – Block Element Modifier es una metodología que lo ayuda a crear componentes reutilizables y compartir código en el desarrollo de aplicaciones para usuario.

web oficial:

http://getbem.com/

 

http://atomicdesign.bradfrost.com/chapter-2/

 

El código CSS tiende al caos cuando se trabaja sin un concepto rector para su ordenamiento. ¿Cómo mantener código CSS ordenado y de fácil mantenimiento?

Cuando del lenguaje de presentación de la WWW se trata, mucho se habla de las nuevas características de CSS3 en cuanto a sus propiedades —gradientes, sombras, transparencias, etc— pero se presta poca atención a cómo ordenar el código CSS en proyectos grandes.

El problema

Es muy común cuando se diseña la interfaz de una webapp, por ejemplo, que los archivos lleguen rápidamente al orden de las miles de líneas de código.

No somos máquinas: lidiar con archivos que contienen miles de renglones de texto técnico es un problema que dificulta nuestro trabajo, complicando los tiempos y en desmedro de la calidad del producto final.

Incluso cuando trabajar con archivos kilométricos pueda ser viable para algunos, esta situación se vuelve en contra cuando debemos compartir el código con nuestros compañeros de trabajo, o incluso con nosotros mismos a futuro!
Tomar un proyecto dentro de un mes y encontrarse con este lío puede ser catastrófico.

Otro gran problema es la repetición de código, por lo general el trabajo sin una estructura de organización genera la necesidad de incluir el mismo código en varios lugares. Recordemos que en ningún caso es conveniente la repetición de código.

Una solución: OOCSS

Los programadores se han estado enfrentando a este tipo de problemas durante años. Existen muchos paradigmas para la generación de código y la lógica de un programa: uno de ellos es la Programación Orientada a Objetos (OOP, por su sigla en inglés).

Este método de trabajo permite la fragmentación de un proyecto grande en unidades mínimas (los mentados objetos), cada una con sus propias responsabilidades.

Lo mismo puede hacerse con el lenguaje CSS, de forma tal que el código pueda ser reusable.

Verán cómo el siguiente ejemplo plantea la repetición de ciertas propiedades y valores de CSS (algo que preferimos evitar).

#button-big {
font-size: 24px;
font-weight: bold;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}
#button-small {
font-size: 16px;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}

Ambos botones comparten gran parte del código, lo que podemos hacer es fragmentar las propiedades de forma más inteligente y aprovechar una gran ventaja de las clases: un mismo elemento de HTML puede tener varias clases aplicadas al mismo tiempo.

Aquí el resultado final:

.button {
font-family: Arial, sans-serif;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}
.button.small {
font-size: 16px;
}
.button.big {
font-size: 24px;
font-weight: bold;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}

De esta manera, minimizamos el código repetido, y nos permitimos el agregado de mayor cantidad de botones a futuro. Por ejemplo, podríamos agregar un botón rojo para situaciones de peligro.

.button.danger {
background: #d00;
}

Si quisiéramos incluir un botón de peligro (rojo), que además fuera grande, aplicaríamos las tres classes en el HTML:

<a href="#" class="button big danger">Cuidado!</a>

Como se ve, el nuevo código es completamente modular 🙂

BEM

BEM – Block Element Modifier es una metodología que lo ayuda a crear componentes reutilizables y compartir código en el desarrollo de aplicaciones para usuario.

web oficial:

http://getbem.com/

 

http://atomicdesign.bradfrost.com/chapter-2/

 

El código CSS tiende al caos cuando se trabaja sin un concepto rector para su ordenamiento. ¿Cómo mantener código CSS ordenado y de fácil mantenimiento?

Cuando del lenguaje de presentación de la WWW se trata, mucho se habla de las nuevas características de CSS3 en cuanto a sus propiedades —gradientes, sombras, transparencias, etc— pero se presta poca atención a cómo ordenar el código CSS en proyectos grandes.

El problema

Es muy común cuando se diseña la interfaz de una webapp, por ejemplo, que los archivos lleguen rápidamente al orden de las miles de líneas de código.

No somos máquinas: lidiar con archivos que contienen miles de renglones de texto técnico es un problema que dificulta nuestro trabajo, complicando los tiempos y en desmedro de la calidad del producto final.

Incluso cuando trabajar con archivos kilométricos pueda ser viable para algunos, esta situación se vuelve en contra cuando debemos compartir el código con nuestros compañeros de trabajo, o incluso con nosotros mismos a futuro!
Tomar un proyecto dentro de un mes y encontrarse con este lío puede ser catastrófico.

Otro gran problema es la repetición de código, por lo general el trabajo sin una estructura de organización genera la necesidad de incluir el mismo código en varios lugares. Recordemos que en ningún caso es conveniente la repetición de código.

Una solución: OOCSS

Los programadores se han estado enfrentando a este tipo de problemas durante años. Existen muchos paradigmas para la generación de código y la lógica de un programa: uno de ellos es la Programación Orientada a Objetos (OOP, por su sigla en inglés).

Este método de trabajo permite la fragmentación de un proyecto grande en unidades mínimas (los mentados objetos), cada una con sus propias responsabilidades.

Lo mismo puede hacerse con el lenguaje CSS, de forma tal que el código pueda ser reusable.

Verán cómo el siguiente ejemplo plantea la repetición de ciertas propiedades y valores de CSS (algo que preferimos evitar).

#button-big {
font-size: 24px;
font-weight: bold;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}
#button-small {
font-size: 16px;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}

Ambos botones comparten gran parte del código, lo que podemos hacer es fragmentar las propiedades de forma más inteligente y aprovechar una gran ventaja de las clases: un mismo elemento de HTML puede tener varias clases aplicadas al mismo tiempo.

Aquí el resultado final:

.button {
font-family: Arial, sans-serif;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}
.button.small {
font-size: 16px;
}
.button.big {
font-size: 24px;
font-weight: bold;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}

De esta manera, minimizamos el código repetido, y nos permitimos el agregado de mayor cantidad de botones a futuro. Por ejemplo, podríamos agregar un botón rojo para situaciones de peligro.

.button.danger {
background: #d00;
}

Si quisiéramos incluir un botón de peligro (rojo), que además fuera grande, aplicaríamos las tres classes en el HTML:

<a href="#" class="button big danger">Cuidado!</a>

Como se ve, el nuevo código es completamente modular 🙂

CSS orientado a objetos, ponte las pilas.

BEM

BEM – Block Element Modifier es una metodología que lo ayuda a crear componentes reutilizables y compartir código en el desarrollo de aplicaciones para usuario.

web oficial:

http://getbem.com/

 

http://atomicdesign.bradfrost.com/chapter-2/

 

El código CSS tiende al caos cuando se trabaja sin un concepto rector para su ordenamiento. ¿Cómo mantener código CSS ordenado y de fácil mantenimiento?

Cuando del lenguaje de presentación de la WWW se trata, mucho se habla de las nuevas características de CSS3 en cuanto a sus propiedades —gradientes, sombras, transparencias, etc— pero se presta poca atención a cómo ordenar el código CSS en proyectos grandes.

El problema

Es muy común cuando se diseña la interfaz de una webapp, por ejemplo, que los archivos lleguen rápidamente al orden de las miles de líneas de código.

No somos máquinas: lidiar con archivos que contienen miles de renglones de texto técnico es un problema que dificulta nuestro trabajo, complicando los tiempos y en desmedro de la calidad del producto final.

Incluso cuando trabajar con archivos kilométricos pueda ser viable para algunos, esta situación se vuelve en contra cuando debemos compartir el código con nuestros compañeros de trabajo, o incluso con nosotros mismos a futuro!
Tomar un proyecto dentro de un mes y encontrarse con este lío puede ser catastrófico.

Otro gran problema es la repetición de código, por lo general el trabajo sin una estructura de organización genera la necesidad de incluir el mismo código en varios lugares. Recordemos que en ningún caso es conveniente la repetición de código.

Una solución: OOCSS

Los programadores se han estado enfrentando a este tipo de problemas durante años. Existen muchos paradigmas para la generación de código y la lógica de un programa: uno de ellos es la Programación Orientada a Objetos (OOP, por su sigla en inglés).

Este método de trabajo permite la fragmentación de un proyecto grande en unidades mínimas (los mentados objetos), cada una con sus propias responsabilidades.

Lo mismo puede hacerse con el lenguaje CSS, de forma tal que el código pueda ser reusable.

Verán cómo el siguiente ejemplo plantea la repetición de ciertas propiedades y valores de CSS (algo que preferimos evitar).

#button-big {
font-size: 24px;
font-weight: bold;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}
#button-small {
font-size: 16px;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}

Ambos botones comparten gran parte del código, lo que podemos hacer es fragmentar las propiedades de forma más inteligente y aprovechar una gran ventaja de las clases: un mismo elemento de HTML puede tener varias clases aplicadas al mismo tiempo.

Aquí el resultado final:

.button {
font-family: Arial, sans-serif;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}
.button.small {
font-size: 16px;
}
.button.big {
font-size: 24px;
font-weight: bold;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}

De esta manera, minimizamos el código repetido, y nos permitimos el agregado de mayor cantidad de botones a futuro. Por ejemplo, podríamos agregar un botón rojo para situaciones de peligro.

.button.danger {
background: #d00;
}

Si quisiéramos incluir un botón de peligro (rojo), que además fuera grande, aplicaríamos las tres classes en el HTML:

<a href="#" class="button big danger">Cuidado!</a>

Como se ve, el nuevo código es completamente modular 🙂

React.js: una mejor introducción a la biblioteca de UI más poderosa jamás creada.

¿Una mejor introducción a React?
Desafortunadamente, la mayoría de los tutoriales de React no tienen en cuenta las mejores prácticas y no siempre te enseñan la manera «correcta» de hacer React.
En este tutorial, repasaré los conceptos básicos de React y las prácticas incorrectas más comunes que podría encontrar.


Este tutorial va a ser largo, ¡así que asegúrate de conseguir algo de café!


¿Por qué elegir reaccionar?
Antes de comenzar, detengámonos un momento y veamos por qué React es la mejor opción.

Declarativo

En Reaccionar, usted describe qué debe renderizar (en lugar de decirle al navegador cómo hacerlo). Esto también significa que la cantidad de boilerplate se reduce considerablemente. En Reaccionar, simplemente inicie la codificación, no tiene ningún 
componente que deba generar. 
Hay algunas configuraciones involucradas, pero cuando se trata de los componentes, puedes expresarlos como funciones puras.

Sintaxis clara


JSX en React se siente como HTML, no hay una sintaxis especial para aprender:

const Greetings = ({ firstName }) => ( < Div > Hola, { firstName } );

Curva de aprendizaje

La curva de aprendizaje es muy importante al elegir un marco de interfaz de usuario. 
React tiene las menos abstracciones. 
Si conoces JavaScript, probablemente puedas comenzar a escribir el código React en un solo día. 
Sí, toma tiempo recoger las mejores prácticas, pero podrá comenzar muy rápido.

Funcional

En mi opinión, la mayor fortaleza de React proviene del hecho de que ni siquiera estás obligado a usar clases. 
Las clases exageran la base de código sin proporcionar ningún beneficio.
En React, toda la interfaz de usuario se puede expresar como un conjunto de funciones puras, y el uso de funciones puras para hacer que la interfaz de usuario se sienta como una bocanada de aire fresco.

¡Vamos a empezar a programar!

Node.js
Node.js es un entorno de ejecución de JavaScript que nos permite compilar el código React.
En primer lugar, asegurémonos de tener instalado Node.js. 
Si no, puede descargarlo desde aquí: 
https://nodejs.org/en/download


crear-reaccionar-aplicación
Usaremos la aplicación crear-reaccionar de Facebook para apoyar nuestra aplicación. 
Esta es la forma más popular de configurar su entorno y comenzar a codificar. 
Viene con muchas herramientas necesarias integradas, lo que nos ayuda a eliminar muchas decisiones.
Para instalar la aplicación create-react-global:
npm i -g crear-reaccionar-aplicación
Luego, para andamiar su primera ejecución de proyecto:
crear-reaccionar-aplicación reaccionar-intro
¡Eso es todo! 
Ahora, para iniciar la aplicación:
cd reaccion-intro

npm start
Esto abrirá un servidor de desarrollo y le permitirá abrir la nueva y brillante aplicación React yendo a 
http: // localhost: 3000 / en su navegador.
Bajo el capó
Ahora, veamos cómo funcionan las cosas bajo el capó. 
Usando el IDE de su elección (recomiendo 
Visual Studio Code ) abra el proyecto recién creado.
index.html
Dentro del proyecto vaya al 
public/index.htmlarchivo. 
Esto es lo que verás:

La parte que nos interesa es la 
<div id="root"></div>
Aquí es donde irá nuestra aplicación React. 
La división raíz completa simplemente se reemplazará con el contenido de nuestra aplicación React. 
Todo lo demás se mantendrá sin cambios.
index.js
Ahora vamos a abrir 
src/index.js
Este es el archivo que arranca la aplicación React completa. 
Y, por cierto, todo nuestro código fuente React entrará en el 
srcdirectorio.

La línea que hace la magia es:
ReactDOM.render (<App />, document.getElementById (‘root’));
Esta línea es una forma de decirle a React que tome nuestro componente de la Aplicación (lo discutiremos un poco) y lo colocará dentro del 
rootdiv que se definió anteriormente dentro del 
index.htmlarchivo.
Centrémonos ahora en la 
<App />parte. 
Esto se parece mucho a HTML, ¿no es así? 
Esto se llama JSX y es una sintaxis especial de JavaScript que React usa para hacer su magia. 
Tenga en cuenta que comienza con un capital 
A , es 
<App /> , no 
<app /> . 
Esta es una convención utilizada por React, que le permite desambiguar entre las etiquetas HTML normales y los componentes React que hemos creado. 
Si no inicia sus componentes con una letra mayúscula, React no podrá procesar sus componentes.
Siempre que usemos JSX, siempre debemos importar React agregando la siguiente línea dentro de nuestro  
.jsarchivo:
importar reaccionar desde ‘reaccionar’;
App.js
Ahora estamos listos para echar un vistazo a nuestro primer componente. 
Vamos a abrir 
src/app.js :

Para crear un componente React, tenemos que crear una clase que herede 
React.Component
Eso es exactamente lo que hace la línea 
class App extends Component
Todos los componentes de React deben implementar un 
rendermétodo; como puede haber adivinado, toda la representación se realiza dentro de este método. 
El 
rendermétodo tiene que devolver el marcado a ser renderizado.
Una pequeña nota al margen: el 
classNameatributo es equivalente al 
classatributo en HTML y se usa para asignar clases CSS para el estilo. 
classes una palabra clave reservada en JavaScript y no se puede utilizar para un nombre de atributo.
Recapitulemos:
El componente se llama App (mayúscula A)
Se extiende la 
React.Componentclase
Tiene que implementar el 
rendermétodo, que devuelve el marcado.

Mala práctica # 1 – Componentes de clase en todas partes
Hay dos formas de crear componentes en React: componentes de clase y componentes funcionales. 
Como te habrás dado cuenta, el ejemplo anterior utiliza un componente de clase. 
Y, desafortunadamente, la mayoría de los tutoriales de React para principiantes fomentan el uso de los Componentes de la Clase.
¿Qué pasa con los componentes de clase? 
Son difíciles de probar, tienden a crecer mucho, son propensos a una separación pobre de preocupaciones, combinan la lógica con la presentación (lo que hace que la depuración y las pruebas sean más difíciles). 
En general, te dispararás en el pie usando Componentes de Clase. 
Especialmente si eres un principiante, te recomendaría que te mantengas alejado de ellos por completo.
Ok, los componentes de clase son malos, lo entiendo. 
Pero cuales son las alternativas? 
Componentes funcionales. 
Si un componente no tiene nada más que el 
rendermétodo, entonces es un gran candidato para refactorizar en un componente funcional. Veamos cómo se puede mejorar el componente de la aplicación creado por create-react-app:

¿Ves lo que hemos hecho aquí? 
Hemos eliminado la clase y reemplazado el 
rendermétodo con 
function App() {...}
Y si hacemos uso de las funciones de flecha de ES6, se verá aún mejor:

Hemos convertido el componente de clase en una función que devuelve el marcado que se va a representar.
Piénselo por un momento … Una función que devuelve el marcado, no hay un código innecesario, ¡solo un marcado puro! 
¿No es hermoso?
El componente funcional se lee mucho mejor y tiene una mayor relación señal / ruido.
En este artículo, nos quedaremos con los Componentes de la Clase, ya que implican menos abstracciones y son más fáciles de demostrar los conceptos básicos de React. 
Una vez que te sientas cómodo con los conceptos básicos de React, te recomiendo que leas mi artículo más detallado: Cómo  
dominar los componentes funcionales de React con Recompose .

Introducción de accesorios
Props es un concepto central para React. 
¿Qué accesorios son exactamente? 
Piense por un segundo sobre los parámetros pasados ​​a una función. 
Los apoyos son solo eso: los parámetros se transmiten a un componente.

Aquí hemos creado un 
Greetingscomponente y lo estamos utilizando para saludar a John Smith desde dentro del 
Appcomponente. 
Esto resultará en el siguiente marcado:
<div>

<div> ¡Eh, tú!
John Smith! </div>

</div>
Los corchetes 
{props.name}indican código JavaScript. 
Se 
Greetingspasó el componente 
firstName
lastNamecomo parámetros, y simplemente los recuperamos accediendo al 
propsobjeto.
Tenga en cuenta que el componente pasó un solo 
propsobjeto, no dos valores para 
firstName
lastName.
Podemos simplificar aún más el código haciendo uso de la sintaxis de desestructuración de objetos de ES6:

Tenga en cuenta que 
(props)fue reemplazado con 
({ firstName, lastName })
Esto significa que solo estamos interesados ​​en esas dos propiedades del 
propsobjeto. 
Y esto, a su vez, nos permite acceder a los 
valores 
firstName
lastNamedirectamente, sin tener que especificar explícitamente 
props.firstName.
¿Qué pasa si hemos estado utilizando 
componentes de clase en su lugar?

No sé sobre ti, pero para mí, ¡esto se ve mucho más hinchado! 
Siempre hay que utilizar explícitamente 
this.props.

Principio de Responsabilidad Única

«Cámara negra, reloj analógico redondo de color plateado, navaja negra Swiss Gear y linterna negra» de 
Alexander Andrews en  
Unsplash
El principio de responsabilidad única es el principio de programación más importante a seguir. 
Establece que un módulo debe hacer una cosa, y debe hacerlo bien. 
No seguir este principio solo puede convertir cualquier base de código en una pesadilla que es imposible de mantener.
¿Cómo podemos violar este principio? 
La forma más común es colocar cosas no relacionadas en el mismo archivo.
Me referiré al principio de responsabilidad única varias veces en este tutorial.
Los principiantes usualmente colocan múltiples componentes en el mismo archivo. 
Aquí hemos colocado los componentes de saludos y aplicaciones dentro del mismo archivo. 
Esta es una mala práctica porque viola el principio de responsabilidad única.
Incluso los componentes más pequeños (como el componente Saludos anterior) deben colocarse en un archivo separado.
Coloquemos el componente Greetings en su propio archivo:

Y luego usarlo dentro del 
Appcomponente:
importar saludos desde «./Saludos»;
const App = () => (

);
Asegúrese de que el nombre del archivo coincida con el nombre del componente. 
Appel componente se debe colocar en 
App.js, el 
Greetingscomponente se debe colocar en 
Greetings.js, y así sucesivamente.

Introduciendo estado
El estado es otro concepto central para reaccionar. 
Aquí es donde desea mantener sus datos, cosas que pueden cambiar. 
¿Almacenar el valor escrito en un elemento de formulario? 
Usa estado 
¿Mantener un registro de puntuación dentro de su juego? 
Usa estado
Construyamos una forma simple que tome el primer nombre del usuario. 
Tenga en cuenta que estoy utilizando a propósito un 
componente de clase para demostrar el concepto. 
Demuestro la refactorización de un componente de clase en un componente funcional en mi otro artículo 
Mastering React Functional Components with Recompose .

Ok, el usuario puede escribir su correo electrónico en el formulario, lo que es genial! 
Si has prestado atención, entonces has notado que no importa qué, el nombre de John se usará en el saludo. 
¿Qué pasa si no todos los nombres de nuestros usuarios son John? 
Nos colocaríamos en una situación muy incómoda.
¿Cómo podemos usar el valor escrito en la entrada? 
En React no se supone que consultemos directamente al DOM. 
Aquí es donde entran los controladores de entrada y el estado.

El estado es básicamente un objeto JavaScript simple que se almacena como una propiedad dentro del 
SimpleFormcomponente de clase. 
Aquí estamos agregando valor 
firstNamea la clase.
Nuestra 
firstNameentrada ahora tiene el 
onChangecontrolador de eventos. 
Se dispara cada vez que el usuario escribe una clave en la entrada. 
Y la propiedad 
this.onFirstNameChangeen nuestra clase maneja los eventos onChange.
Echemos un vistazo a la 
onFirstNameChangepropiedad:
this.setState (…)
Así es como actualizamos el estado de nuestros componentes. 
No debemos actualizar el estado del componente directamente, solo a través del 
setStatemétodo. 
Y para actualizar el valor del 
firstNameestado, simplemente pasamos un objeto con los valores actualizados al 
setStatemétodo:
{firstName: event.target.value}
En este caso, 
event.target.valuees el valor que se escribió en la entrada del formulario. 
En este caso, este es el nombre del usuario.
Una nota al margen: no hemos definido 
onFirstNameChangecomo un método. 
Esto es extremadamente importante para definirlo como una propiedad de función de flecha en la clase, y no como un método. 
Si en su lugar lo hubiéramos definido como un método, entonces 
thisestaríamos vinculados a la entrada del formulario que llamó al método, no a la clase como habríamos esperado. 
Este pequeño detalle a menudo hace tropezar a los principiantes. 
Esta es otra razón para evitar clases en JavaScript.

Validación de formularios

» 
IMac de plata encendida» por 
Brennan Burling en  
Unsplash
Ahora implementemos una validación de formulario simple usando expresiones regulares. Aseguremos que el primer nombre tenga al menos tres caracteres y contenga solo letras.
Agregaremos otro controlador de eventos para el 
onBlurevento: se activará cuando el usuario deje la entrada. 
También agregaremos otra propiedad al estado -  
firstNameError
Y luego mostraremos el error de validación justo debajo de la entrada (si hay errores presentes).

Estado
Primero, hemos agregado una 
firstNameErrorpropiedad al estado:
state = {

firstNameError: «»,

};
Función de validación
La validación en sí misma está ocurriendo en la 
validateNamefunción de flecha anterior. 
Simplemente prueba el nombre de entrada contra la expresión regular:
validateName = nombre => {

const regex = / [A-Za-z] {3,} /;

volver! regex.test (nombre)

?
«El nombre debe contener al menos tres letras …»

: «»;

}
Si la validación falla, devolvemos el error de validación. 
Si la validación tiene éxito, devolvemos una cadena vacía (lo que significa falta de error). 
Estamos utilizando expresiones ternarias de JavaScript aquí para hacer que el código terser.
gestor de eventos onBlur
Echemos un vistazo al 
onBlurcontrolador de eventos (se activa cada vez que el usuario deja la entrada):
onFirstNameBlur = () => {

const {firstName} = this.state;
const firstNameError = this.validateName (firstName);
devuelve this.setState ({firstNameError});

};
Aquí extraemos el 
firstNameestado utilizando la sintaxis de desestructuración de objetos ES6. 
La primera línea es equivalente a:
const firstName = this.state.firstName;
Luego ejecutamos la función de validación definida anteriormente con el 
firstName, y luego establecemos la 
firstNameErrorpropiedad de estado con el error devuelto. 
Si la validación falla, 
firstNameErrorse establecerá. 
Si tiene éxito, entonces se establecerá en una cadena vacía.
render método
Y ahora echemos un vistazo al 
render()método:
render () {

const {firstNameError, firstName} = this.state;

}
Aquí nuevamente estamos utilizando la desestructuración de objetos ES6 para extraer valores del estado.
<input

onBlur = {this.onFirstNameBlur}

/>
Esta línea asigna la 
onFirstNameBlurfunción como el controlador de eventos para el 
onBlurevento.
{firstNameError && <div> {firstNameError} </div>}
Aquí estamos usando la función de evaluación de cortocircuito de JavaScript. 
El div que contiene la 
firstNameErrorvoluntad se procesará solo si el valor en sí es verdadero.

Estilo

“Escaleras de caracol vacías en fotografía de ángulo bajo” por 
Maxime Lebrun en  
Unsplash
Si lo has estado siguiendo, es posible que hayas notado que nuestro formulario no es particularmente bonito … ¡Cambiemos eso agregando un poco de estilo en línea!

Los estilos en React se agregan simplemente pasando los estilos en el 
styleatributo.
Admito que no soy un diseñador, pero el arte de mi programador se ve mucho mejor ahora. 
Aquí está el formulario con error de validación:

Mala práctica # 3 – estilo dentro del componente
Aquí hemos encontrado otra mala práctica, que desafortunadamente es demasiado común: colocar los estilos dentro del 
rendermétodo de nuestros componentes. 
¿Por qué es esto malo? 
Esto viola el principio de responsabilidad única. 
También desordena nuestro componente con estilos, lo que afecta significativamente la legibilidad.
¿Cuáles son los remedios? 
Crea un 
styleobjeto 
especial 
que contendrá todos nuestros estilos. 
Se considera una buena práctica colocar el 
stylesarchivo en un archivo separado:

Y luego usarlo dentro de nuestro 
SimpleFormcomponente:

¡Esto se ve mucho más limpio!
Para llevar: coloca tus estilos en un archivo separado.

Añadiendo más campos de formulario
Hagamos el formulario un poco más interesante agregando un campo para ingresar el apellido:

No ha cambiado mucho aquí, simplemente hemos duplicado el código para la 
firstNameentrada y también 
hemos 
duplicado sus controladores de eventos.
¿Acabo de decir 
duplicado ? 
El código duplicado es un gran NO en el desarrollo de software y debe evitarse a toda costa.
Mala práctica # 4 – no dividir tus componentes.
Esta mala práctica vuelve una vez más a la violación del Principio de Responsabilidad Única. 
Un buen código escrito debe leerse como un poema, y ​​apuesto a que el método de renderizado de nuestro componente no se lee como un poema. 
Vamos a cambiar eso.
Las entradas son casi idénticas, y ambas requieren algún tipo de validación. 
Apliquemos un poco de refactor-fu a nuestro componente y creamos un 
TextFieldcomponente 
reutilizable 
:

Simplemente extraje uno de los componentes del 
rendermétodo, lo convertí en un componente funcional y le pasé cosas que cambian como accesorios:

Bien, esto se lee mucho mejor ahora! 
Incluso podemos ir un paso más allá y crear 
TextFieldcomponentes 
dedicados 
para el nombre y el apellido:

Aquí simplemente estamos devolviendo un componente prefabricado para mostrar el primer nombre. 
Esta 
({...rest})es la nueva sintaxis de Restricción de objetos, lo que significa que todo lo que se pase como apoyo se guardará en el 
restobjeto. 
Luego, para pasar los accesorios a la 
TextFieldsintaxis de la Distribución del objeto 
{...rest} . 
Esto toma el 
restobjeto, distribuye sus propiedades y las pasa al 
TextFieldcomponente.
En otras palabras: tomamos lo que fue pasado 
FirstNameFieldy lo pasamos sin cambios a 
TextField.
Y similarmente, el 
LastNameField:

Así es como se ve nuestra forma ahora:

¡Mucho mejor!

¿Por qué los componentes de clase son tan malos de todos modos?
Los componentes de clase son difíciles de probar (a diferencia de los componentes funcionales).
Mala separación de preocupaciones: si estamos siendo perezosos, seguiremos poniendo todo en una sola clase, lo que puede crecer hasta convertirse en una monstruosidad de 1000 líneas con el tiempo (lo he visto suceder varias veces).
Los componentes de clase tienden a poner la lógica y la presentación juntas en una sola clase. 
Lo que una vez más es malo para la separación de preocupaciones.
Los componentes de clase no son puros, y son difíciles de razonar. 
Los componentes funcionales, por otro lado, son puros: siempre darán como resultado el mismo marcado para los mismos apoyos de entrada.
Los componentes funcionales hacen cumplir un buen diseño. 
Te ves obligado a pensar en el diseño.
No es necesaria la 
thispalabra clave, que siempre ha sido una fuente importante de confusión.
Código fuente
El código fuente que lo acompaña se puede encontrar en 
GitHub

¿Que sigue?
Este tutorial se ha vuelto un poco más largo de lo que esperaba. 
Todavía hay mucho que cubrir, especialmente en relación con la organización de códigos, y algunas otras mejores prácticas. 
Déjame saber si estás interesado en escuchar más en los comentarios.
Si realmente desea dominar React, le recomiendo que consulte mi otro artículo: 
Mastering React Functional Components with Recompose .
¡Asegúrate de seguirme para más artículos sobre React y JavaScript!

MYSQL AND PHP


See the Pen Flat minion by Amin Poursaied (@arasdesign) on CodePen
1

PASAR UNA CONSULTA A MATRIZ PARA LUEGO SER TRATADA DE MANERA MÁS OPTIMA.

$result = mysql_query(«SELECT SUM(puntos) as total FROM encuesta WHERE idusuario=1»);

$row = mysql_fetch_array($result, MYSQL_ASSOC);

echo $row[«total»];

Tensor Flow por donde empezar?

Configuración

Configuración del navegador

Hay dos formas principales de obtener TensorFlow.js en sus proyectos basados ​​en navegador: – Usar etiquetas de script. – Instalación desde NPM y utilizando una herramienta de compilación como Parcel , WebPack o Rollup .

Si es nuevo en el desarrollo web, o nunca ha oído hablar de herramientas como webpack o parcel, le recomendamos que utilice el enfoque de etiquetas de script . Si tiene más experiencia o desea escribir programas más grandes, podría valer la pena explorar el uso de herramientas de compilación.

Uso a través de Script Tag

Agregue la siguiente etiqueta de script a su archivo HTML principal.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>

Hay dos maneras principales dues maneres principals d’obtenir TensorFlow.js en els vostres projectes basats en el navegador: – Usant etiquetes d’escriptura . – Instal·lació des de NPM i utilitzant una eina de construcció com Parcel , WebPack o Rollup .

Si sou nou per al desenvolupament web, o no heu sentit parlar d’eines com webpack o paquets, us recomanem que utilitzeu l’etiqueta d’escriptura . Si teniu més experiència o voleu escriure programes més grans, val la pena explorar amb eines de construcció.

Ús a través d’una etiqueta d’escriptura

Afegiu l’etiqueta d’escriptura següent al fitxer HTML principal.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>

Usar disparadores en las Bases de Datos SQL

https://dev.mysql.com/doc/refman/5.7/en/create-trigger.html

Javascript: Funciones que son invocadas inmediatamente (IIFE)

fuente original:

https://programacionymas.com/blog/funciones-javascript-invocadas-inmediatamente-IIFE

Aprende cómo funcionan las IIFEs (Immediately-invoked function expressions) en Javascript, y por qué se han usado tradicionalmente en el desarrollo Javascript.


Cuando empiezas a aprender Javascript, no ha de pasar mucho tiempo para que te encuentres con esto:

(function () {
    // algún código aquí
})();

Y de seguro que resulta confuso la primera vez que lo ves.

Pero ahora vamos a revisar con detenimiento qué significa este código, y por qué es que se ha usado mucho en Javascript.

El código como tal representa una immediately invoked function expression, o también conocida como IIFE (se pronuncia «iffy»).


En Javascript, las funciones se pueden crear a través de una declaración de función, o una expresión de función.

Declarar una función es la forma más común de crear una función con nombre:

// Declaración de una función con nombre
function myFunction() { /* código aquí */ }

Por otro lado, si estás asignando una función a una variable o a una propiedad, estás tratando con una expresión de función.

// Asignar una expresión de función a una variable
var myFunction = function () { /* código aquí */ };

// Asignar una expresión de función a una propiedad
var myObj = {
    myFunction: function () { /* código aquí */ }
};

Una función creada en el contexto de una expresión es también una expresión de función (function expression).

// Todo lo que está dentro de los paréntesis es parte de una expresión
(function () { /* código aquí */ });

// Todo lo que está después del operador de negación es parte de una expression
!function () { /* código aquí */ };

El punto clave de las expresiones Javascript es que devuelven valores.

En los 2 casos anteriores, el valor retornado por cada expresión es una función.

Eso significa que si queremos invocar la función creada a través de la function expression solo necesitamos añadir un par de paréntesis al final (aquí podríamos pasar parámetros a la función de ser necesario).

Esto nos lleva al ejemplo de código que estabamos analizando inicialmente:

(function () {
    // código aquí
})();

Pero, ¿por qué motivo se usan las IIFE?

Ahora sabemos qué es lo que hace el código anterior, ¿pero por qué hacerlo?

La primera razón para usar una IIFE es por la privacidad de los datos.

Las variables declaradas con var en Javascript tienen un alcance a nivel de función (solo se pueden usar en la función que las contiene).

Por esa razón toda variable declarada dentro de una IIFE no puede ser usada por fuera.

(function () {
    var foo = "ABC";

    // Esto imprime "ABC"
    console.log(foo);
})();

// ReferenceError: foo is not defined
console.log(foo);

Por supuesto, puedes asignar un nombre a la función e invocarla posteriormente, y lograr el mismo resultado.

function miFuncionInmediata () {
    var foo = "ABC";

    // Esto imprime "ABC"
    console.log(foo);
}

miFuncionInmediata();

// ReferenceError: foo is not defined
console.log(foo);

Este segundo ejemplo hace lo mismo, y de seguro que lo habrías entendido a la primera, ¿verdad?

¿Entonces por qué nos encontramos a menudo con la primera expresión?

  • Primero porque estamos asignando un nombre a la función, cuando realmente no se necesita. Estamos ocupando el global namespace, incrementando la posibilidad de que ocurra alguna colisión entre identificadores.
  • Segundo, el último ejemplo no nos dice que se trata de una IIFE por sí mismo. A diferencia del caso anterior, en donde basta ver el código para saber que se trata de una función anónima que solo necesita ser invocada una vez, inmediatamente luego de su creación.
  • Dado que la función tiene un nombre, ésta podría ser usada por equivocación más de una vez.

Debes tener en cuenta que se pueden pasar parámetros a una IIFE:

var variableExterna = "ABC";

(function (variableInterna) {
    // Esto imprime "ABC"
    console.log(variableInterna);
})(variableExterna);

Esta es la historia detrás de las IIFEs (Immediately Invoked Function Expressions).

Esta forma de usar las funciones se usa muy amenudo en patrones y bibliotecas de Javascript.

Aquí puedes leer más acerca del patrón «Módulo revelador», que es un buen ejemplo de ello. Y de paso, aprender más acerca de los módulos en Javascript.

Más beneficios de usar una IIFE

Reducir el alcance de las búsquedas (scope lookups)

Se puede lograr un mejor rendimiento usando IIFEs:

Si pasamos objetos globales (como window, document, jQuery, u otro) a una función anónima, y luego usamos estos objetos a través de su referencia local, Javascript no tendrá la necesidad de hacer búsquedas en el ámbito global.

Lo que ocurre es que:

Javascript primero busca propiedades en el ámbito local, y mientras no encuentre la referencia adecuada continúa su búsqueda hacia arriba, hasta llegar al ámbito global.

Ser capaces de poner objetos de ámbito global en un ámbito local nos permite mejorar el rendimiento porque las referencias se resuelven más rápido.

Veamos un ejemplo de ello:

// Función anónima con 3 argumentos
(function(window, document, $) {

// Aquí podemos usar las referencias window, document, jQuery
// en un ámbito local 

})(window, document, window.jQuery); // Los objetos globales son pasados a la función anónima

Minificar código

Otro beneficio de usar IIFEs es que ayuda a optimizar el proceso de minificación. Dado que los objetos globales requeridos son pasados a la función anónima como parámetros, un minificador puede asignar un nuevo nombre a las variables locales, que consten de una sola letra (mientras no se repitan no hay problema).

Veamos un ejemplo:

// Función anónima con 3 argumentos
(function(w, d, $) {

// Aquí se pueden usar las referencias de forma local
// que se han obtenido de window, document, y jQuery

})(window, document, window.jQuery); // Objetos globales pasados como parámetros

Nota: Podemos usar $ con total libertad, ya que jQuery se obtiene bajo ese identificador en el ámbito local. No hay necesidad de preocuparse por posibles conflictos con otras bibliotecas.


Conclusión

Una IIFE (Immediately Invoked Function Expression) constituye un patrón de diseño usado comúnmente en Javascript (por bibliotecas, como jQuery, Backbone.js, Modernizr, y muchas más) para encapsular un bloque de código dentro de un ámbito local.

En ES2015 (inicialmente nombrado como ES6) es posible declarar ámbitos a nivel de bloque. En ES5 no, y es por ello que se emulaba este comportamiento con el uso de IIFEs.

En pocas palabras, para conseguir un encapsulamiento, antes de ES2015 se hacía de esta manera:

(function () { 
    var x = 10;
})();
console.log(x);  // Reference Error: x is not defined

Pero desde la versión ES2015 es posible usar lo siguiente:

{ 
    let x = 10;
};
console.log(x);  // Reference Error: x is not defined

Esta nueva característica block scoping es posible usando las palabras reservadas let y const que se introdujeron en el nuevo estándar de Javascript. Sin embargo, var sigue existiendo por cuestiones de compatibilidad.

Por lo tanto, decimos que var tiene alcance a nivel de función, y no a nivel de bloque. Si queremos encapsular la variable xdeclarada con var hace falta usar IIFEs, ya que unas llaves no serán suficiente:

{ 
    var x = 10;
};
console.log(x);  // Imprime 10

Referencias