INTRODUCCIÓN
¿Qué es una librería o framework? Dejando el debate de lado, diremos que un framework lo componen un conjunto de librerías, pero existen librerías tan amplias y poderosas (como JQuery) que pueden tener el mismo nivel de desempeño de un framework. Entonces llamaremos frameworks simples a las librerías individuales y frameworks completos al conjunto de librerías, tal y como recomiendan en un artículo de Awwwards.
¿Entonces, qué es una librería? Vamos a definir el término “librería”: diremos que es un conjunto de código estandarizado y organizado en carpetas y archivos desde los cuales podrás servirte como apoyo en algún proyecto web que estés poniendo en marcha simplemente copiando/pegando y llamando al archivo en tu html. No tienes que hacer mucho más.
DE LLENO A NUESTRO TEMA
Sin más rodeos, las 10 primeras librerías Javascript:

1. TRIANGLIFY

No hace mucho se volvió trending el uso de diseños triangulares para los backgrounds de ciertos tipos desites. Pues bien, con Trianglify, una increíble librería Javascript, podrás generar coloridas mallas de triángulos que se pueden usar como imágenes SVG o fondos CSS

2. PHOTOSWIPE

Una moderna librería que te permite, entre otras cosas, generar galerías de imágenes integrados con Touch Gestures; la respuesta a gestos táctiles en las pantallas de dispositivos móviles.

3. TYPIST

Una divertida y lúdica librería con la cual podrás agregar animaciones a tus textos (especialmente a los de cabecera) generando el efecto de “tipear y borrar, volver a tipear”. Seguramente encontrarás formas creativas de emplearlo en tus proyectos.

4. SCROLL REVEAL

Como su nombre lo indica, es una librería de tipo scroll que te irá mostrando los elementos de la página según el movimiento del scroll. Lo que la diferencia de otras es que funciona tanto en sentido descendente como ascendente. Súper fancy

5. INTRO.JS

Una de mis favoritas. IntroJs es una librería del tipo tour con el que podrás incorporar una secuencia de pasos, a modo de guía, en tus aplicaciones web. Una excelente herramienta para optimizar UX (experiencia del usuario).

6. HAMMER.JS

Con HammerJS podrás instalar gestos (touch gestures) a tus páginas web y hacerlas funcionales en dispositivos táctiles.

7. BESPOKE

Bespoke.js es una súper ligera librería (1KB) para presentaciones de slides en navegadores modernos, diseñado para generar un gran ecosistema de plugins.



8. SWEET ALERT 2

Con Sweet Alert 2 podrás agregar estilos a los métodos “alert” de Javascript. Es 100% personalizable y muy fácil de implementar. Una atractiva solución para los botones que llaman a una acción.

9. BOBA.JS

Una pequeña pero extensiva librería Javascript que te permitirá trabajar con Google Analytics de una forma más sencilla.

10. D3.JS

Necesitas implementar gráficos estadísticos, mapas, cajas de flujo o árboles cuaternarios? Todo esto y más podrás hacerlo con D3, una poderosa librería Javascript para la manipulación de documentos basados en datos usando HTML, SVG y CSS.







Cuando se va a empezar a crear un sitio web, generalmente se navega por Internet y se encuentran sitios que nos gustan, y queremos hacer algo similar y no sabemos que tecnología están utilizando.
Para saber que CMS (WordPress, Joomla!, Drupal, Prestashop, etc) y que plantillas, plugins está utilizando un sitio web, hay varias herramientas que nos pueden ayudar mediante un análisis de la página que se desea investigar.
No se trata de realizar Spying o Sniffing, sino un proceso bastante común que es el Benchmarking: http://es.wikipedia.org/wiki/Benchmarking
Nota: para obtener la información desde el terminal usar-> w3m builtwith.com/cirelramos.blogspot.com/
1. Built With
Built With es una herramienta online bastante completa, puesto que revela mucha información de un sitio web: tecnología del servidor, proveedor de hosting, CMS utilizado, librerías de JavaScript, herramientas de analítica, codificación, etc.


2. W3Techs
Similar a Built With, ya que tiene aspectos comunes a las herramientas anteriores, se puede utilizar para comparar resultados, y obtener algún dato más que la herramienta anterior no ofrece.

3. WhatCms.org
WhatCms.org es una herramienta online que nos revela únicamente que CMS (gestor de contenidos) puede estar usando un sitio web. Unicamente nos indicará si el sitio web utiliza Joomla!, Drupal, WordPress, etc.


4. CMS Detector
Similar a la herramienta WhatCms.org en un principio solo te muestra el CMS que utiliza una web, pero se puede pulsar en "Click here to fully analyze ...” y entonces presentará un informe con una información general sobre el sitio web, el ranking, páginas que tiene indexadas, redes sociales, etc.


5. Guess
Al igual que la herramienta CMS Detector no muestra mucha información al principio, pero indica en que porcentaje cree que utiliza tal tecnología. Para vera un informe más completo hay que pulsar en “Fetch additional headers and other information for this url”. Puede ser útil utilizar Guess tambien para comparar los resultados con las herramientas anteriores.


6. WordPress Theme Detector
WordPress Theme Detector es una herramienta online que analiza una web realizada con el CMS WordPress, ofrece datos como nombre de la plantilla (theme), página oficial de la plantilla, versión, licencia, autores, etc… y los plugins utilizados


7. What WordPress is theme that?
Es una herramienta online similar a la anterior, pero al igual que hemos recomendado en otras herramientas, es importante comparar, porque podemos obtener datos algo distintos.
Mientras las herramientas anteriores, son online, las dos siguientes se tienen que instalar en el navegador.


8. Chrome Sniffer
Extensión del navegador Google Chrome que muestra las herramientas que utiliza una página.https://chrome.google.com/webstore/detail/chrome-sniffer/homgcnaoacgigpkkljjjekpignblkeae


9. Wappalyzer
Similar a la extensión para Google Chrome pero es para el navegador Mozilla Firefoxhttps://addons.mozilla.org/es/firefox/addon/wappalyzer/ aunque tambien está disponible para Chromehttps://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg
Estas dos últimas extensiones son menos completas que algunas de las herramientas online, pero puede ser de vuestro interés el tener instalada alguna de ellas.
De cuando en cuando es útil saber cuál es nuestra IP pública. No la privada, con la que se ven nuestros equipos en la red de área local a la que solemos conectarnos en casa o en el trabajo, que es asignada normalmente por el router vía DHCP. La IP pública determina entre otras cosas el país en el que estamos -de ahí que ciertos servicios nos bloqueen el acceso, como Pandora en Estados Unidos, a partir de nuestra IP.



Pues bien, consultar esa IP normalmente es sencillo si consultáis páginas web como whatismyip.com, o su versión en español, cualesmiip.com.
Eso no es necesario desde Linux, ya que hay una forma de averigar esa IP pública haciendo uso del comando curl. Si no tenéis instalado el paquete habrá que instalarlo, tal y como indican en ITswapshop, donde revelan el proceso tanto para Ubuntu:
Terminal:
sudo apt-get install curl
para obtener la ip publica puede ser con cualquiera de estos 3 comandos
Terminal:
curl ifconfig.me
recomiendo este:

Terminal:
wget -O - 'https://api.ipify.org?format=json' | cut -d ":" -f 2 | cut -d "\"" -f 2 | cut -d "\"" -f 1 | tail

Terminal:
curl ifconfig.co




PASOS PARA BORRAR EL HISTORIAL DE CHROME:

     Entramos en el menu desplegable de chrome y seleccionamos CONFIGURACIÓN


Si hay un cuenta asociada a chrome, donde se sincroniza el historial y marcadores de ese gmail, es necesario desvincularla.




Luego vamos al final de la pagina y hacemos click en MOSTRAR CONFIGURACIÓN AVANZADA
   Dentro de configuración Avanzada hacemos click en el boton BORRAR DATOS DE NAVEGACION


Al mostrar la siguiente ventana, marcamos todas las opciones y colocamos desde que periodo eliminara los datos y marcamos EL PRINCIPO.. luego pulsamos ELIMINAR DATOS DE NAVEGACIÓN



ALGO MUY IMPORTANTE!! SINO DESEAS REPETIR CONSTANMENTE LOS PASOS ANTERIORES PUEDES ACCEDER A CHROME DE FORMA ANÓNIMA Y DE ESTA MANERA NO SE ALMACENA NI TUS DATOS NI HISTORIAL DE NAVEGACIÓN

Modo Incógnito




nos abre la siguiente venta en la parte central nos da una pequeña reseña del modo incógnito 



Configuraciones Básicas para Sublime Text
Primero editaremos la configuración de user: en sublime text vamos a PREFERENCES->SETTINGS-USER y remplazamos por el siguiente codigo.


{
 // Cuadrado del minimapa: Esta propiedad nos permite activar el cuadrado del mini mapa que nos muestra donde estamos, por lo general se muestra cuando pasamos el mouse por el minimapa, pero con esta propiedad, siempre sera visible.
 "always_show_minimap_viewport": true,
 // Nombre de las carpetas en negritas: Esta propiedad,lo que hace es muestrar el nombre de las carpetas en negrita y el el nombre de los archivos los muestra normal, permitiendo identificar mas rapido que es un archivo y que es una carpeta.
 "bold_folder_labels": true,
 //Ocultar trozo de codigo: Esta propiedad nos muestra al lado del numero de la linea, una flecha que nos permite ocultar un bloque de codigo, como ejemplo seria un div y su contenido.
 "fade_fold_buttons": false,
 //Tamaño de fuente en el sublime text
 "font_size": 14,
 //para que tome las tab mas pequeñas
 "tab_size": 1,
 //Resaltar línea actual: Esta propiedad permite que se resalte la línea actualmente seleccionada.
 "highlight_line": true,
 //Para identifcar aquellos ficheros del proyecto actual que aún no han sido salvados, ésta opción resaltará aquellas pestañas de los archivos modificados dentro del programa
 "highlight_modified_tabs": true,
 "ignored_packages":
 [
  "Vintage"
 ],
 //Guarda los archivos cuando el programa pierde el foco de la aplicación. Te ahorrarás muchos CTRL+S y la posibilidad olvidarte de guardarlo cuando deberías.
 "save_on_focus_lost": true,
 //El scroll horizontal puede ser un dolor de cabeza. Con la opción word wrap activada, el texto flotará hasta el tamaño de tu pantalla e impedirá que tengas que hacer scroll horizontal.(es como el ajuste de linea que aplicamos en el bloc de notas)
 "word_wrap": true,
//convierte el tamaño del tab mas pequeño solo en la visualizacion de sublime
 "tab_size": 1,
//convierte los tab por espacios
 "translate_tabs_to_spaces": true
}




Ahora editaremos la configuración del teclado de user: en sublime text vamos a PREFERENCES->KEY BINDGINS-USER y remplazamos por el siguiente codigo.


[

 // ocultar side bar solo con ctrl+b
 { "keys": ["ctrl+b"], "command": "toggle_side_bar" },

  {//si utilizan livereload(plugin de sublime text) les permitira recargar la pagina presionando el comando a continuación
 
      "keys": ["ctrl+shift+r"], "command": "browser_refresh", "args": {
 
          "auto_save": true,
 
          "delay": 0.0,
 
          "activate_browser": true,
 
          "browser_name" : "all"
 
      }
 
  },
    /*cerrar la plegar actual*/
  { "keys": ["ctrl+-"], "command": "fold" },
  /*abrir las plegar actual*/
  { "keys": ["ctrl++"], "command": "unfold" },
  
  { "keys": ["ctrl+shift+alt+-"], "command": "fold_tag_attributes" },
  /*abrir TODAS las plegar actual*/
  { "keys": ["ctrl+shift+alt++"], "command": "unfold_all" },
  
 
   { //para realizar comentario de una linea
 
    "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
 
   {//para realizar comentarios de bloque
 
    "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } },
 
   {//incrementar el tamaño de fuente en sublime text
 
    "keys": ["ctrl+shift++"], "command": "increase_font_size" },
 
 {//incrementar el tamaño de fuente en sublime text
 
   "keys": ["ctrl+="], "command": "increase_font_size" },
 
 {//decrementar el tamaño de fuente en sublime text
 
   "keys": ["ctrl+shift+-"], "command": "decrease_font_size" },
 
   {//mostrar el auto completado
 
    "keys": ["ctrl+space"], "command": "auto_complete" },
 
     { "keys": ["ctrl+space"], "command": "replace_completion_with_auto_complete", "context":
 
          [
 
               { "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
 
               { "key": "auto_complete_visible", "operator": "equal", "operand": false },
 
               { "key": "setting.tab_completion", "operator": "equal", "operand": true }
 
          ]
 
     }
 
]



Instalar plugins en sublime text 3
Visitamos el siguiente enlace y copiamos el texto


Luego vamos en el sublime text a VIEW -> SHOW CONSOLE

Y pegamos el contenido dentron de la consola, presionamos enter y cuando nos emita un mensaje reiniciamos el sublime text.




Ahora, cada vez que queramos buscar un paquete en el repositorio para instalarlo, pulsamosCTRL+SHIFT+P y escribimos Install Package. Entonces podremos buscar entre la gran cantidad de paquetes que existen para Sublime Text e instalarlos con un simple click.
























Plugins para uso básico

Emmet: Este es el plugin por excelencia, que maravilla a todo el mundo que conoce Sublime Text. Pero no cabe llevarse a engaño, realmente no es un plugin exclusivo de Sublime Text, sino que está disponible para todos los principales editores e IDE del mercado. Emmet tiene varias utilidades, pero la que más llama la atención es cómo a partir de un código resumido se puede extender para convertirlo en un código completo. Simplemente se escribe el código resumido y luego se pulsa el tabulador (TAB) para extenderlo. Algo como "ul>li*3" (sin las comillas) + TAB se convertiría en una lista UL con tres elementos LI. Pero es solo un pequeñísimo ejemplo. Dominar todos esos shortcuts te puede llevar alguna/s semana/s de pruebas. Otro de los míticos shortcuts en Emmet que todo el mundo conoce y usa es el "html:5" (sin las comillas) + TAB que se convertirá en el documento básico del HTML5. También muy útil "p>lorem" (+ tabulador) que se convertirá en un párrafo "Lorem ipsum".


GutterColor Si sueles escribir archivos de estilos CSS con frecuencia, este paquete te será de mucha ayuda, puesto que e encarga de colocar un pequeño circulo a la izquierda de la línea en la que has colocado un color hexadecimal:















AutoFileName  ¿Alguna vez te encuentras tamizar a través de las carpetas en la barra lateral tratando de recordar lo que usted nombró ese archivo? No recuerdo si fue un jpg o png? Tal vez lo que desea, puede escribir nombres de archivos más rápido. No más.  Ya sea que su hacer una etiqueta img en html, establecer una imagen de fondo en CSS, o vincular un archivo .js a tu html (o lo que la gente más use rutas de nombre de archivo para estos días ...), ahora se puede autocompletar el nombre del archivo. Además, utiliza la función de autocompletar incorporado, así que no hay necesidad de aprender otro acceso directo molestos.













Laravel Blade Highlighter Este paquete esta enfocado en poder ajustar en colores la sintaxis de los archivos blade y programacion en el framework de laravel






ColorPicker
También para diseñadores, este paquete permite abrir un panel de elección de color al pulsar la combinación de teclas CTRL+SHIFT+C. Al seleccionar un color y pulsar aceptar, nos establecerá el código hexadecimal, ahorrándonos el tener que utilizar un programa externo para tal fin.





BracketHighlighter Este sencillo paquete nos permite resaltar visualmente el ámbito de la zona donde estamos escribiendo en nuestro código. Así, si nos posicionamos sobre la apertura de una llave o unos paréntesis, se resaltará visualmente donde se cierran.


CSS Snippets El paquete CSS Snippets contiene una gran cantidad de snippets especialmente diseñados para ahorrar tiempo en el desarrollo de código CSS. Por ejemplo, snippets que permitan crear código compatible con todos los navegadores, utilizando prefijos vendor de características que aún no están implementadas por completo:




Éste es uno de mis favoritos. Git gutter es un plugin simple que muestra un icono en el área izquierda contigua a los números de línea para indicar líneas insertadas, modificadas o eliminadas en comparación con tu proyecto de git.
























Este plugin muestra resaltado de líneas potencialmente incorrectas. Con su extensa documentación y larga lista de linters, este plugin es una gran solución para asegurarte que tú código esté libre de errores.























YUI Compressor Fundamental para crear los archivos .min de nuestros .css y .js una vez terminado el proyecto. Con el archivo que quiero minimizar abierto, simplemente pulsando CMD+B nos crea el .min.css o .min.css en la misma carpeta donde tenemos los originales, por supuesto sin pisarlos. Os saldrá un mensaje en la consola cuando se ejecute el plugin.
























PREFIXR Esta maravilla nos pone los prefijos CSS3 necesarios para el crossbrowser, sin que nosotros tengamos que estar escribiéndolos. Escribes la regla CSS te colocas dentro del bloque, le das CMD+CTRL+X y te pone los prefijos que se necesiten. Esta maravilla nos pone los prefijos CSS3 necesarios para el crossbrowser, sin que nosotros tengamos que estar escribiéndolos. Escribes la regla CSS te colocas dentro del bloque, le das CMD+CTRL+X y te pone los prefijos que se necesiten.


Se puede aplicar a bloques de código que comprendan varios selectores, seleccionando todo, SIEMPRE QUE NO HAYA COMENTARIOS ENTRE ELLOS, este plugin se tuesta con los comentarios. Revisad siempre el código que os genera porque a veces hace cosas raras, pero compensa con creces el trabajo de ponerlos a manita.




















jQuery Completo paquete de snippets para jquery, que hace que no tengamos que escribir las funciones, métodos y variables más comunes. Además como todos los snippets en Sublime son personalizables, podemos modificarlos como mejor nos parezca. Como siempre, se trata de escribir unas pocas letras, que nos muestre el abanico de funciones posibles y que nos las escriba él solito. Algunos ejemplos: $+Tab -> $(‘string/element/array/function/jQuery object/string, context’) this+Tab -> $(this) fdt+Tab -> fadeToggle(‘slow/400/fast’, function() { });


Search Stack Overflow ¿Cuántas veces has terminado encontrando la solución a tu problema en Stack Overflow?? Pues busca directamente ahí y no te marees… este magnífico plugin permite buscar directamente en Stack Overflow desde el editor, y abre el navegador en los resultados de búsqueda. Lo puedes hacer de dos formas; – Seleccionas el texto a buscar -> botón derecho, “Stack overflow Search”.

l
– Desde una caja de búsqueda normal, abres el command palette mediante CMD+MAY+P, pones “stack” y te aparece la opción “Search from input”. Te aparece el input de buscar de siempre y ya está.



Parece largo pero os aseguro que se tarda menos que en ir al navegador, meter la frasecita, darle al “buscar” y moverte por los resultados de google. En cuanto te familiarizas con el CMD+MAY+P es casi inmediato.





Search WordPress Codex Yaaaaa.. ya sé que todos somos super profesionales del front, y que wordpress es para los que no saben, pero nos toca tragar y hacer webs en wordpress por un tubo, y como nosotros sabemos, lo hacemos por código, y como lo hacemos por código, este plugin nos viene de coña para consultar en el Códex directamente desde Sublime.
 Funciona igual que plugin de Stack Overflow. 
La búsqueda también puede hacerse mediante selección o mediante input. 
Además no se limita a buscar en el Codex, sino que puedo elegir dónde busco de estas cuatro opciones:
 – Search WordPress Codex 
– Wordpress Function Reference 
– Search QueryPosts –
 QueryPost Function Reference
 Maravilloso, si tienes dudas de lo que hace una función, la buscas en el Function Reference y te abre la página de ESA función…en fin…una gozada. 

 WordPress Package Seguimos con WordPress, este plugin es una completísima colección de snippets para autocompletar todo lo que os imaginéis de sintaxis de nuestro querido CMS. Está basado en el paquete para TextMate, de modo que para ver cómo funcionan los snippets debéis consultar en el original. Merece la pena echar un vistazo a toda la documentación porque dejaréis de escribir código cuando desarrolléis WP.

 Clipboard History Este plugin también lo descubrí hace poco, y aunque en principio no parece muy útil, estoy viendo que lo es más de lo que creía. Se trata de tener accesible el histórico de lo que has copiado. Cuántas veces copias una línea, y cuando te das cuenta, resulta que has copiado otra después, sin haber utilizado la primera, y te metes en un bucle de: “pego ésto ahora, porque si no también lo pierdo, y vuelvo a por lo otro que copié, espera, dónde estaba…me lo apunto en un archivo nuevo para cogerlo ahora, guardar, no, espera joder!! me lo tatúo en la frente? Ahhhhgggg!!!” Pues eso, abres el histórico y punto. Nada de tatuajes en la frente. La pega que le pongo es que la combinación de teclas es como para unas prisas, desde luego los que seáis poco coordinados lo tenéis chungo, pero al menos están todas juntas. CMD+ALT+CTRL+V y nos sale el desplegable:




Algunos otros paquetes dignos de mención: 
  • Git (Control de versiones con Git)
  •  SFTP (Gestor integrado de SFTP/FTP)
  •  CSS Color Converter (Transforma entre formatos hexadecimales, RGB y HSL)
  •  LESS2CSS (Convierte código LESS a CSS al guardar)
  •  Terminal (Abre una terminal en la carpeta de trabajo)

Fuentes: 







Bueno manos a la obra:

sudo su

accedemos a la carpeta del escritorio donde va quedar nuestro archivo que enlaza al disco real.

cd /home/TuUsuario/Escritorio

Creamos el archivo y le indicamos que acceda a la partición completa

VBoxManage internalcommands createrawvmdk -filename discoReal.vmdk -rawdisk /dev/sdxX -relative

le damos permisos a la partición de lectura

chmod 666 /dev/sdxX

Tristemente al iniciar cada vez tu ordenador debes ejecutar el comando chmod 666 sobre la partición.
ir a tu maquina virtual seleccionar añadir disco virtual existente y seleccionas el que creaste.

Ublock : es una extensión para el bloqueo de publicidad y captura de contenido no deseado como lo hace amazon y otras empresas aunque no es efectivo al 100% consume menos recursos que otros, es   software libre.

Memoria

Consumo de memoria en Chromium
Análisis comparativo del consumo de memoria en Chromium


Consumo de memoria en Firefox
Análisis comparativo del consumo de memoria en Firefox

CPU

Utilización del CPU

Bloqueos

El hecho de que uBlock sea ágil y eficiente no significa que bloquee menos rastreadores.
Cantidad de bloqueos


Disconnect le permite visualizar y bloquear los sitios web invisibles que hacen un seguimiento de su historial de navegación, es una alternativa a Ghostery

The Great Suspender

reducir el consumo de memoria de chrome
Esta simple pero maravillosa extensión para Google Chrome se encarga de suspender las pestañas que no se encuentren en uso para liberar recursos del sistema. Es perfecta para los locos de las pestañas pues no tienes que cerrar ninguna de tus preciadas páginas abiertas para reducir el consumo de Chrome.
Su funcionamiento es bastante simple, la añades al navegador y puedes configurar un limite de tiempo para que las pestañas se auto-suspendan. Es decir, si quieres que todas las pestañas que no estás usando en determinado momento entren en un estado como de "hibernación" en el que no van a consumir ni memoria ni recursos del procesador, simplemente elige cuantos minutos u horas antes de que esto pase.
Configuración extra de la extensión para mejorar el rendimiento:


Básicamente es colocar que cuando pase 1 minuto luego de que la pestaña pierda el foco (te encuentres activo en otra pestaña del chrome) la inactiva entrara en modo suspendido, esto liberara mas rápido la memoria.