Dynamic React Gallery

Aplicación web realizada en React que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.

El código se encuentra subido en el siguiente repositorio:
https://github.com/roberto-pf/DynamicReactGallery

Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicReactGallery/

Demo funcionando en este enlace: http://gallery-react.disastercode.com.es

JQ

JQ es una herramienta de consola que nos permite parsear ficheros json. Te permite buscar dentro de un json y mostrar los resultados formateados en lugar de en una sola línea.

Existe una herramienta online donde puedes practicar expresiones: https://jqplay.org/
En el post anterior donde extraiamos de un Json la información necesaria para la Git Action se utilizó con este ejemplo.

Documentación oficial: https://stedolan.github.io/jq/

Herramienta para formateo de json: https://jsonformatter.curiousconcept.com

Recopilación de recursos para desarrollo web. Año 2020. (Parte 3)

Videos de Fondo
BigVideo: http://dfcb.github.io/BigVideo.js/
VideoBG: http://syddev.com/jquery.videoBG/
Tubular: http://www.seanmccambridge.com/tubular/

Misceláneos
Color Thief: http://lokeshdhakar.com/projects/color-thief/
Colorzilla: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
Tippy.js: https://atomiks.github.io/tippyjs/

Plugin con Formularios
jqueryFlexdatalist: http://projects.sergiodinislopes.pt/flexdatalist/

Gráficas
MorrisJS: https://morrisjs.github.io/morris.js/

Mapas
Google Maps: https://developers.google.com/

Node y NPM
Lite Server: https://github.com/johnpapa/lite-server

Recopilación de recursos para desarrollo web. Año 2020. (Parte 2)

Pugins especiales
Metro Notification: https://codecanyon.net/item/metro-notifications/3903495
Yose Modal: https://codecanyon.net/item/yose-modal/8776097
Autumn: https://codecanyon.net/item/autumn-leaf/5244654
Metro Menu: https://codecanyon.net/item/metro-menu/4476162
Metro Modal: https://codecanyon.net/item/metro-modal/5337148

Generadores de Animaciones
Animate.css: https://daneden.github.io/animate.css/
Greensock: http://greensock.com/

Sliders
Super Simple Slider: http://supersimpleslider.com/
Better-simple-slideshow: http://leemark.github.io/better-simple-slideshow/
Galleria: http://galleria.io/
Supersized: http://buildinternet.com/project/supersized/
Swiper: http://idangero.us/swiper/

Especiales de jQuery
Masonry: http://masonry.desandro.com/
Detect mobile browsers: http://detectmobilebrowsers.com/
Lazy Load: https://github.com/tuupola/jquery_lazyload
Stickyjs: http://stickyjs.com/

Lightboxes
swipebox: http://brutaldesign.github.io/swipebox/
fancybox: http://fancyapps.com/fancybox/
frescojs: http://www.frescojs.com
lightbox2: http://lokeshdhakar.com/projects/lightbox2/

Dynamic Angular Gallery

Aplicación web realizada en Angular 10 que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.

El código se encuentra subido en el siguiente repositorio:
https://github.com:roberto-pf/DynamicAngularGallery

Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicAngularGallery/

Demo funcionando en este enlace: http://gallery.disastercode.com.es

Además, se ha generado una rama swiperjs_version en el repositorio. En dicha rama, la presentación de las imágenes se realiza con el componente Swiperjs
Demo funcionando en este enlace: http://galleryswiper.disastercode.com.es

Objeto JSON en javascript: JSON.stringify vs JSON.parse

El objeto JSON contiene los métodos necesarios para analizar el JavaScript Object Notation (JSON) y, a su vez, convertir valores a JSON. A continuación se esponen los métodos de los que consta:

JSON.parse(text[, reviver])
Convierte una cadena de texto en un objeto de javascript.

Parámetros
– text: La cadena que convertirá a JSON. Vea el objeto JSON para una descripción de la sintaxis JSON.
– reviver (Opcional): Función que sobreescribe cómo se transforma el valor producido por el parsing.

Retorna el objeto que se corresponde con el texto JSON entregado.

JSON.parse('{"p": 5}', function (key, value) {
    if(key === "") return value;     
    return value * 2;             
});                           
// { p: 10 }

JSON.stringify(valor[, remplazo [, espacio]])
Convierte un valor dado en javascript a una cadena JSON.

Parámetros
– valor: El valor que será convertido a una cadena JSON.
– función de remplazo (Opcional): Es una función que altera el comportamiento del proceso de conversión a cadena de texto, o un array de objetos String o Number que representan una lista de elementos validos que se incluyen en la cadena JSON.
– espacio (Opcional): Es un objeto de tipo String o Number que es usado para insertar un espacio en blanco dentro de la cadena de salida JSON para su mejor comprensión. Si es un número, se entiende que representa el numero de espacios a agregar; este numero tiene un limite de 10 espacios; numeros menores que 1 inplican que no se utiliza espacio alguno. Si es un cadena (sólo los 10 primeros caracteres son tomados en cuenta), esta es usada como espacios en blanco. Si este parámetro no se define o este es nulo no se agrega ningun espacio.

Retorna un string JSON representando el valor dado.

function replacer(key, value) {
  // Filtrando propiedades 
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7}; 
var jsonString = JSON.stringify(foo, replacer);
// '{"week":45, "month":7}'

Fuente Json

JSON Viewer

El JSON Viewer se trata de una herramienta que te permite visualizar los ficheros *.json.

Capturas de pantalla del visor:

Main View

Text View

Fiddler Plugin

Custom Visualizer showing data as a grid

Enlace de la aplicación.