VmWare: tips and tricks

He migrado unas maquinas virtuales VmWare que tenía con Windows XP a Windows 7. Para ello, he creado las nuevas máquinas con windows 7 y luego les he añadido los discos duros de las de XP para de forma amigable luego ir pasando lo que me interesa nada mas antes de borrer dichos discos. También, me he encontrado una serie de errores.

Añadir disco duro existente

1 – Se puede hacer desde la opción de Editar configuración. Desde ahí en la pestaña Hardware virtual, se hace click en el botón Agregar nuevo dispositivo.

2 – Seleccionar Disco duro existente en el menú desplegable. Y se abre un cuadro de diálogo para seleccionar un archivo *.wmdk.

3 – Si estaba creado con otra versión VmWare te pedirá que le conviertas el formato.

4 – Al iniciar la máquina virtual te saldrá el nuevo disco con todo su contenido.

Error: Taking ownership of this virtual machine failed

Cuando al iniciar una máquina virtual da este error y no arranca. Se soluciona eliminando el diretorio *.lck que encontraras dentro del directorio donde está esa máquina.

Esto puede pasar si al apagar la máquina ha pasado algo y se ha quedado ahí.

Error: VMware Workstation Unrecoverable Error (vcpu-0)

En este enlace hay una recopilación de todas las posibles soluciones a este error en función de lo que esté dando problemas. Listado:
– Method 1: Updating the VMware Workstation application
– Method 2: Disabling / Uninstalling another organization’s virtualization software
– Method 3: Enabling Secure Virtual Machine (SVM) or Intel Virtualization Technology from BIOS/UEFI
– Method 4: Disabling simultaneous multithreading (SMT) in the BIOS/UEFI
– Method 5: Reverting to the default clocking frequencies
– Method 6: Modifying the VMX file

Bootstrap 4 Cheat Sheet

Aunque ya tenemos la versión 5 disponible (se pueden ver las diferencias entre la version 5 y la 4 aquí).

Un buen sitio donde ver un resumen de todas las clases de Bootstrap 4 de forma amigable es el siguiente: https://hackerthemes.com/bootstrap-cheatsheet/

Por otro lado, también tenemos la siguiente imagen:

 

Fuente

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/

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

Fuentes
Font-Awesome: https://fortawesome.github.io/Font-Awesome/
ionicons: http://ionicons.com/
Glyphicons: http://getbootstrap.com/components/
Weather-icons: https://erikflowers.github.io/weather-icons/
Google Fonts: https://www.google.com/fonts
Blokfont: http://blokkfont.com/

Iconos, letras e imágenes
Real Favicon Generator: http://realfavicongenerator.net/
Iconspedia: http://www.iconspedia.com/
CSSAuthor: http://www.cssauthor.com/free-mockup-templates-psd-designs/#iPhone
Freepik: http://www.freepik.com/
Skitch: https://evernote.com/intl/es/skitch/
ARCTEXT.JS: http://tympanus.net/Development/Arctext/
Shuffle Letters: http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
mThumb: https://github.com/mindsharelabs/mthumb

Generadores de código
JSON-Generator: http://www.json-generator.com/
HTML-Compressor: https://htmlcompressor.com/compressor/
CSS3-Generator: http://css3generator.com/
Generador de Color HTML: https://color.hailpixel.com/
Gradient-Editor: http://www.colorzilla.com/gradient-editor/
placehold.it: http://placehold.it/#

Servicios en Linea
Son Parser Online: http://json.parser.online.fr/
Pingdom: http://tools.pingdom.com/fpt/
Codepen.io: http://codepen.io/
Responsinator: http://www.responsinator.com/

Programas y aplicaciones
HTTP-Server: https://www.npmjs.com/package/http-server
Sweet Alert: http://t4t5.github.io/sweetalert/
Bootstrap Modals: http://getbootstrap.com/javascript/#modals
Date Picker: http://amsul.ca/pickadate.js/date/
Chosen: http://harvesthq.github.io/chosen/
Complexify: https://www.danpalmer.me/jquery-complexify/

Extensiones para Visual Studio Code

En el Visual Studio Code se pueden instalar extensiones para mejorar la usabilidad de la herramienta, además del tiempo que te permiten ahorrar.
Instalación:
– Hacer click en el icono de Extensiones de la barra de actividades. Se despliega la barra de actividades mostrando las extensiones instaladas.
– Utilizar la caja de texto de búsqueda para buscar extensiones.
– Instalar las que interesen.

Algunos plugins interesantes:

• AB HTML Formatter
• Activitus Bar
• Angular Snippets
• Angular Language Service
• Angular2-inline
• Awesome Flutter Snippets
• Auto Close Tag
• Bookmarks
• Bootstrap 4, FontAwesome 5
• Bracket Pair Colorizer 2
• Color Highlight
• Dart
• Flutter
• Gist
• HTML CSS Support
• ionic 4 Snippets
• JavaScript (ES6)
• jshint
• Material Icon Theme
• Paste JSON as Code
• Prettier – Code Formatter
• PWA Tools
• Terminal
• TODO Highlight
• Todo Tree
• TSLint
• TypeScript Importer

Atajos de teclado en Windows para Visual Studio Code

Todos esos son los atajos existentes por defecto. Se pueden modificar he incluso añadir nuevos desde Archivo > Preferencias > Métodos abreviados de teclado.

Resumen generación de documentación con Compodoc para Angular 10

Compodoc facilita la generación de la documentación de tu proyecto de Angular. A continuación, voy a exponer un resumen de como utilizarlo.

1 – Instalación

npm install -g @compodoc/compodoc

2 – Añadir en package.json el comando que lo ejecuta.

"scripts": {
"compodoc": "npx compodoc -p tsconfig.app.json"      
//En angular 10 tuve que poner tsconfig.base.json para 
//que me generase bien la documentación.
}

3 – Ejecutar la creación de la documentacion

npm run compodoc

————————————————————————

Aunque hay muchas más, como se puede ver en la documentación que facilita la gente de Compodoc. Algunas de las opciones que se puede ir añadiendo al comando de ejecución son:

-d ---------> directorio destino
-o ---------> abre automáticamente la documentación en el navegador
-s ---------> levanta el servidor de node
--theme -----> selecciona el tema
--includes --> documentacion adicional. Se pone el directorio del summary.json. 
Se crean ficheros md. https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax
-w ---------> detecta los cambios en el código y actualiza la documentación.
--customFavicon -> cambia el favicon.
--hideGenerator -> oculta el logotipo de compodoc.
-y ----------> hoja de estilos propia para compodoc. Se le indica un directorio 
donde haya un style.css.

El comando de generación añadiendo todos esos flags quedaría así:

 "compodoc": "npx compodoc -p tsconfig.base.json -d docs -o -s 
--theme vagrant --includes ./aditionaldoc -w --customFavicon ./src/favicon.ico 
--hideGenerator -y ./src/assets/cssCompodoc"

————————————————————————

Los comentarios deben añadirse así:

- Documentar un método, variable, componente,....
/**
 *
 */

- Documentar parámetro de un método
/**
 * @param variable
 */

- Documentar retorno de un método
/**
 * @returns
 */

- Ignorar en la documentacion para que no salga
/**
 * @ignore
 */

- Ejemplo de uso de un componente u otro objeto.
/**
 * @example
 *
 */

. Se puede comprobar el nivel de comentarios añadidos en la sección de cobertura de código que te genera.

– Excluir en el tsconfig.base.json los ficheros que no queremos que se revisen. Así no saldrán en la cobertura.

"exclude": [
"src/test.ts",
"e2e/**"
]

Ejemplo de uso

Fuente

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

Ejemplo para creación de Pipe personalizado en Angular

Primero vamos a crear un Pipe llamado NewLine con el comando ng que lo que va a hacer es sustituir los saltos de linea por saltos html.

//Comando de creación Pipe
ng g pipe pipes\NewLine

//código de la clase
import { Pipe, PipeTransform } from '@angular/core';
/**
 * Pipe que convierte los saltos de linea en saltos html.
 */
@Pipe({
  name: 'newLine'
})
export class NewLinePipe implements PipeTransform {
  /**
   * Metodo que realiza la transformación
   * @param value 
   * @param args 
   */
  transform(value: string, args: string[]): any {
      return value.replace(/(?:\r\n|\r|\n)/g, '
');
  }
}

Ejemplo de uso:

< div [innerHtml]= "description | newline"> < /div >

Fuente Pipe