Snipplr: trozos de código

ByLuis

snipplr.pngA todos nos pasa que nos gusta reutilizar (copy/paste) aquellas trozos de código (snippet) que hemos creado en algún proyecto anterior y que no nos apetece volver a pensar cómo hacerlo. En vez de tener que buscar entre todo el código que tenemos y pasarse todo el tiempo diciendo “recuerdo haber hecho esto en tal sitio”, podemos usar Snipplr para guardar nuestros propios snippets o para usar los que comparten otros usuarios, organizados por lenguaje de programación y por tags.
Snipplr
Vía / Criterion

Similar Posts

Gutenberg Snippet block

ByLuis

Últimamente estoy trabajando bastante con Gutenberg, tiene sus cosas buenas y malas. Sea como sea, es el futuro de WordPress, así que toca aprender.

Lo más interesante de todo es poder usar lo que sabía de webpack, React, HMR, … Y para practicar he hecho un plugin que permite añadir snippets de código en los posts usando los bloques de Gutenberg

Para ello uso la librería highlight.js que permite destacar código de forma sencilla. Aquí un ejemplo

//  Import CSS.
import './scss/style.scss';
import './scss/editor.scss';
import icon from './icon';
import edit from './edit';
import save from './save';
import attributes from './attributes';

import { __ } from '@wordpress/i18n'; // Import __() from wp.i18n

export const name = 'sentidoweb/snippet';

export const settings = {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Snippets editor', 'sw-snippet' ), // Block title.
	icon: icon,
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'code', 'sw-snippet' ),
		__( 'format', 'sw-snippet' ),
		__( 'snippet', 'sw-snippet' ),
	],

	attributes,
	edit,
	save,
};

Snippet Block en Github

|

Weebly: crea tu web de forma rápida con Ajax

ByLuis

weebly.pngWeebly nos ofrece la posibilidad de crear páginas web de forma rápida, sencilla y online. Mediante el uso de Ajax y gracias al drag&drop, podemos crearnos nuestro sitio web en pocos minutos.
Entre las características que ofrece encontramos: uso del drag&drop para la generación de páginas, variedad de temas para elegir, subdominios personalizados, posibilidad de exportar a un fichero zip y numerosos tipos de contenido.
weebly2.png
Para los desarrolladores que esté interesados, quizás les guste saber que además de las opciones anteriores, también ofrece lo siguiente: uso personalizado de Ajax (drag&drop, efectos), subida de ficheros mediante Ajax, integración de un botón que nos permite ir atrás/adelante en el sistema de ventanas y diseño de elementos potente.
Demo:

Weebly
Vía / Ajaxian

Consejos para diseñar emails

ByLuis

A la hora de diseñar los emails en formato HTML que nuestras aplicaciones enviarán a los usuarios, hay que tener en cuenta varios puntos que nos ayudarán a un diseño más correcto:

  • Olvidarse del tableless: si, aunque sea duro, es mejor volver a las tablas y olvidarse del posicionamiento y la maquetación vía CSS.
  • Usar los estilos dentro de las etiquetas: la mayoría de los lectores de correo online ignoran lo que hay entre la cabecera del HTML, por eso es conveniente usar los estilos dentro de las etiquetas.
  • No uses imágenes de fondo: aunque para un buen diseño puede ser esencial, hay algunos lectores que no mostrarán los background, por lo que es mejor no usarlos para asegurarnos de que todo el mundo vea correctamente el correo.
  • Considera las imágenes bloqueadas por defecto: por seguridad los clientes de correo bloquean las imágenes por defecto, por lo que no es conveniente usarlas para indicar el contenido del mensaje.
  • Usa el atributo alt en las imágenes: como estarán bloqueadas por defecto, es necesario indicar la mayor información posible en ese atributo.
  • Usa paths absolutos: ya que el mail se leerá en otro servidor es necesario indicar la ruta completa para que los contenidos se vean correctamente.
  • Ten cuidado con el tamaño de los archivos: a parte de que el usuario no debe esperar para poder leer el correo, algunas veces los correos con archivos pesados son considerados spam.
  • Evita flash y similares: evita el uso de flash u otros contenidos multimedia que puede que no se vean en el cliente.
  • Diseña para espacios pequeños: aunque se trate de un HTML no siempre el espacio donde se ve es amplio, piensa en dimensiones pequeñas a la hora de diseñar.

9 best practices for email design

Vía / CSS Globe

XSS mediante HTML no estándar

ByLuis

Cuando se quieren evitar ataques XSS, normalmente en PHP se usan las funciones htmlspecialchars o htmlentities.

Ahora veo un ejemplo en el que un ataque puede evitar estas funciones cuando se crea la página con HTML no estándar. Tenemos el típico ejemplo de un texto que se introduce por un formulario y se presenta como un enlace.

$dato = htmlentities($_GET['dato'], ENT_QUOTES);
echo "<a href=pagina.php?dato=$dato>Enlace</a>";

Si os fijáis bien veréis que el enlace está mal formado y no tiene las comillas en el href. Si metieramos como dato de entrada lo siguiente: ” onclick=alert(null)” (sin las comillas), nuestra página sufriría un ataque XSS y mostraría un mensaje alert.

Non-Standard HTML Fuels XSS Attacks

| |

Escritura el campos blob en MySQL y PHP

ByLuis

Muy buen artículo que explica cómo almacenar imágenes en campos blob usando MySQL y PHP, el post explica realmente cómo crear galerías de imágenes almacenándolas en campos blob. Yo personalmente no soy muy partidario de esta opción, cuando realmente se debería guardar la ruta de la imagen en el servidor y que el servidor web se encargue de enviar la imágen, ya que si no, lo que hacemos es hacer trabajar bastante a la BD.
De todas formas, el artículo puede sernos útil para saber como almacenar en este tipo de campos, porque aunque el ejemplo no sea del todo correcto, en alguna ocasión si que vamos a necesitar guardar datos en campos blob.
Muy bien explicado, añade conceptos básicos de protección por contraseña, actualización y borrado de imágenes, a parte de un par de consejos sobre los problemas que nos podemos encontrar con la capacidad máxima que se permite subir al servidor usando PHP.
PHP MySQL example: image gallery (blob-storage)
Vía / Good PHP Tutorials

Gearman: crea aplicaciones distribuidas

ByLuis

Gearman provee un framework para distribuir aplicaciones entre diferentes máquinas o procesos. Permite realizar trabajo en paralelo, balanceo de carga y realizar llamadas de funciones entre diferentes lenguajes:

  • Open source
  • Multi-lenguaje: hay interfaz para varios lenguajes (cuya lista sigue creciendo), por lo que permite crear aplicaciones heterogéneas con clientes procesando trabajo en un lenguaje y la aplicación en otro.
  • Flexible: no está atado a un patrón de diseño específico. Puedes unir aplicaciones distribuidas con el modelo que elijas, por ejemplo Map/Reduce.
  • Rápido: tiene un protocolo y una interfaz simple con un servidor optimizado en C que minimiza la sobrecarga de la aplicación.
  • Incrustable: como es rápido y ligero, es válido para aplicaciones de todos los tamaños. Además es fácil añadir aplicaciones ya existentes.
  • Tolerancia a fallos: además de ayudar en la escalabilidad, permite tolerancia a fallos.

Gearman

Vía / Ronald Bradford