Alguien mas se ha dado cuenta de que no hay ningún voto negativo en ningún vídeo de youtube ? .. he estado como 2 horas buscando vídeos estúpidos para ver si tenían votos negativos y ninguno tenia nada o.O

Los votos negativos no han ido al trabajo hoy..

PD: Ya lo han arreglado xD

Saludos

No suelo meterme mucho en Tuenti pero hoy vi una imagen.. y una frase de Albert Einstein..




¿ Que opinan ? Yo creo que tamos jodidos xD

Saludos

He pensado que estaría interesante crear un post parecido a "Pequeños Trucos en PHP" o "Librería de Snippets !! (Posteen aquí sus snippets)" pero orientado a javascript y CSS. Se trata de pegar funciones o "código" que facilite la tarea y que nadie tenga que reinventar la rueda xD.

Indicad por favor a que "lenguaje" pertenece: [javascript] - [CSS] - [HTML5] y en caso de usar alguna librería (como jQuery) debéis indicarla también. Ejemplo:
[javascript] [jQuery] - Hacer que tu pantalla te de una hostia.

Por supuesto el código debe ir entre sus respectivas etiquetas: [code=javascript][/code], [code=css][/code], [code=html4strict][/code].

Como es de costumbre en cualquier post de este tipo.. el autor de este empieza primero así que:

---

[javascript] - Validar usuario,contraseña y correo.

Esto es una función que valida (mediante regex) si el input cumple con el objetivo (type).

Para "usr" se requiere de un nombre sin espacios, de un mínimo de 4 caracteres y un máximo de 12. No permite ningún carácter que no sea A-Z o 0-9. Tampoco permite letras del tipo ñ ç o acentos (á,ó,é etc.).

Para "pwd" se requiere de una contraseña con un mínimo de 6 caracteres (no tiene máximo). Requiere al menos una letra minúscula, una mayúscula y un numero. Aunque acepte caracteres como la ñ o ç (acentos incluidos), no los toma en cuenta a la hora de validar las minúsculas y mayúsculas.

Para "mail" se requiere de un correo con las siguientes características: Puede contener letras(A-Z), numeros(0-9), punto(.), barra baja(_), porcentaje(%), mas(+) y menos(-).  Necesita 1 arroba(@). El nombre de dominio (aaa.com ) debe ser de al menos 2 letras y la extensión de al menos 2 y un máximo de 5.

Devuelve, TRUE en caso de que cumpla y FALSE en caso de que no. No diferencia entre mayusculas y minusculas excepto para "pwd".

var dm_validate = function(input,type){
   switch(type){
      case "usr":
         regex = /^[a-z0-9]{4,12}$/i;
         break;
      case "pwd":
         regex = /(?=.*)(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{6}/;
         break;
      case "mail":
         regex = /^[A-Z0-9._%+-]+@[A-Z0-9\.\-]{2,}\.[A-Z]{2,5}$/i;
         break;
   }
   if(input.match(regex)){return true;}else{return false;}
};

Uso

dm_validate("drvy","usr");

---

[javascript] - Generador de contraseña.

Esta función la uso con la anterior pero la pongo separada por si acaso. Se trata de una función que genera una contraseña del tamaño que hayas indicado y a partir de los caracteres indicados en la variable "possible". Acepta plenght que es el tamaño (numero de caracteres) de la contraseña... si no se indica asume el numero 10. Hace un while hasta que la contraseña cumpla con el regex indicado (el mismo que el de dm_validate). Devuelve la contraseña generada.

var dm_pwdgenerator = function(plenght){
   if(plenght===undefined){plenght = 10;}
   var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:!,.;$/()=-_';
   var text='';
   while (text.match(/(?=.*)(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{6}/)===null){
      text = '';
      for(i=0;i<plenght;i++){
         text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
   }
   return text;
};

En mi caso, en vez de hacer text.match(...)===null, simplemente llamo a dm_validate:

while (dm_validate(text,'pwd')!==true){

Uso

console.log(dm_pwdgenerator(6)); // Escribe en la consola, una contraseña de 6 caracteres

---

[javascript] [jQuery] - Tooltips.

Esta función me costo un buen tiempo y una buena quemada de cabeza xD. Genera un tooltip (el típico cuadradito que te dice cosas xD). A diferencia de los millones de plugins para jquery que he visto, esta función elimina su rastro y NO deja ***** en el DOM. Acepta 3 parámetros:
   target_items = Los objetos donde aparecerá.. (deben llevar el atributo title).
   css = La clase css del tooltip
   garbage_collect = Elimina cualquier rastro tanto del tooltip generado como de anteriores. Usar si se llama a la función mas de 1 vez.

var dmToolTip2 = function(target_items,css,garbagecollect){
	initialized=undefined;
	oldtitle=undefined;
	$(target_items).on('mouseover', function(event){
		if(initialized===undefined && $(this).attr('dmtooltip2')===undefined){
			newid = 'dmToolTip2';
			element = $(this);
			if(element.attr('title')===undefined){return false;}
			element.attr('dmtooltiptitle',element.attr('title'));
			element.attr('dmtooltip2','set');
		} else {return false;}
		$('body').append('<div class="'+css+'" id="'+newid+'"><p>'+element.attr('dmtooltiptitle')+'</p></div>');
		my_tooltip = $('#'+newid);
		my_tooltip.css({display:"none"}).fadeIn(400);
		element.removeAttr('title');
	})
	.on("mouseout", function(event){
		initialized = undefined;
		element.removeAttr('dmtooltip2');
		element.attr('title',element.attr('dmtooltiptitle'));
		element.removeAttr('dmtooltiptitle');
		if(garbagecollect===true){$("[id*=dmToolTip2]").remove();} else {$("#"+newid).remove();}
	})
	.on("mousemove",function(kmouse){
		var border_top = $(window).scrollTop();
		var border_right = $(window).width();
		var left_pos; var top_pos; var offset = 20;
		if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){left_pos = kmouse.pageX+offset;}
		else {left_pos = border_right-my_tooltip.width()-offset;}
		if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){top_pos = border_top +offset;}
		else {top_pos = kmouse.pageY-my_tooltip.height()-offset;}
		my_tooltip.css({left:left_pos,top:top_pos});
	});
};

Css del tooltip. Lo mas importante es que la clase lleve POSITION:ABSOLUTE; para que se pueda mover sobre el elemento. Lo demás es cosa de gustos =)

.maintip {max-width:300px; min-width:100px; padding:3px; margin:0px 0px 0px -20px; font-size:16px; color:#FFF; border-radius:7px 7px 7px 0px; position:absolute; background:#CACACA; z-index:999; left:-9999px; font-family:"Segoe UI",Arial, Helvetica, sans-serif;}
.maintip p {background:#222; color:#FFF; text-shadow:#000 0px 0px 5px; border-radius:3px; padding:3px; letter-spacing:1px; position:relative; margin:0px;}

Ejemplo de uso:

dmToolTip2("#midiv a","maintip");

<body>
   <div id="midiv">
      <a href="www.google.com" title="¿Porque te quieres ir?">Ir a Google</a>
   </div>
</body>
 

Recuerden usarlo cuando el DOM esta cargado por completo.

---

Espero/amos vuestros snippets =)

Saludos

Bueno, decir que he creado este tema aquí porque el tema ira mas bien sobre plugins, trucos y tips de desarrollo web mas que de otros lenguajes.

Bueno..

Básicamente...

¿Que es Sublime Text 2?
Es un editor de texto multi-plataforma (Windows,Linux,Mac OS X). Por supuesto tiene su coloreador de código.. y otras cosas típicas de un editor como lo es Notepad++ o TextMate.

¿Porque Sublime Text 2? y no otro...
Es simple, pesa poco (7mb) y es muy potente.. permite la instalación de plugins y snippets.. ademas de ser completamente personalizable.
Se dice.. y personalmente lo afirmo que es mejor que TextMate..

Descargar Sublime Text 2
Si te he convencido para probarlo puedes descargar su versión "UNREGISTRED" que no te limita a nada.. sin mas muestra un mensaje que dice.. "Cómprame" cada 9 guardados de archivo..
http://www.sublimetext.com/2
Por supuesto también puedes buscarte un serial/crack que registre la versión. Pero si te gusta y tienes algún que otro dolar de sobra puedes comprarlo por 59$.

Atajos

Selección múltiple

Pulsado Ctrl + D, seleccionamos la próxima ocurrencia de la palabra/string que tenemos seleccionada.

Pulsando Ctrl + L, seleccionamos la próxima linea.

Pulsando Ctrl y utilizando el ratón, podemos seleccionar lo que queramos.

Linea de comandos

Pulsando Ctrl + Shift + P podemos abrir la linea de comandos, desde la cual podemos hacer de todo.. desde insertar snippets.. cambiar configuraciones a cambiar de lenguaje.

Movernos por el código

Pulsando Ctrl + P, podemos navegar por el source del archivo abierto, por otros archivos y etc..

Pulsando Ctrl + R, puedes encontrar los metodos/funciones de tu documento.

Si pulsamos Ctrl + G, y escribimos un numero, nos llevara a la linea con ese numero.

Si al pulsar Ctrl + P escribimos #, nos mostrara todas las etiquetas de un documento HTML.

Múltiples cursores

Pulsando Ctrl y haciendo click sobre las lineas, podemos insertar múltiples cursores y cambiar o añadir contenido a la vez.


Modo anti-distracción
Para entrar en el modo anti-distracción, puedes pulsar Shift + F11. Esto centrara el código y lo pondrá a "Full Screen".


* Puedes ver mas atajos en la siguiente url. Si usas windows solo tienes que cambiar el símbolo ⌘ por Ctrl.

https://gist.github.com/1207002

Snippets

Aunque, Sublime Text 2 ya viene con algunos snippets integrados, podemos fácilmente crear mas de ellos y específicos para nosotros.

Por ejemplo, para crear un snippet que inserte la ultima versión de jQuery no hace falta mas que ir a Tools -> New Snippet... Ahí se nos abrirá un documento nuevo de este estilo:

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>
 

De ahí hace falta solo modificar el contenido entre <![CDATA[ y ]]>, con el texto que queramos insertar.

Después des-comentar la linea <tabTrigger></tabTrigger> y cambiar "hello" por la palabra clave sera cambiada por el texto al pulsar Tab.

Existen opciones adicionales como <scope>source.python</scope> que definirán donde se podrá activar el snippet. Si por ejemplo, lo des-comentamos y cambiamos source.php o text.html solo se ejecutar en PHP o en HTML respectivamente.

<snippet>
  <content><![CDATA[
<script lang="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>includejquery</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>text.html</scope>
</snippet>

Por ejemplo, este snippet, se ejecutar al escribir includejquery y pulsar Tab, y incluirá la ultima versión del .js de jQuery.

* Para editar un snippet, debemos ir a Preferences -> Browse Packages.. de ahí entrar en la carpeta "User", buscar el nombre bajo el cual lo hemos guardado y arrastrarlo a Sublime Text 2.

* HAY MUCHA MAS INFORMACIÓN y UTILIDADES sobre los snippets, su funcionamiento y sus etiquetas. Para verla puedes usar la siguiente dirección url:
http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/snippets.html?highlight=snippets

Plugins

Sin duda esta es una de las mejores partes de Sublime Text 2.
En Sublime Text 2, esto se llama Control de Paquetes. Para activarlo, deben poner lo siguiente en la consola y reiniciar el programa. Para abrir la consola nos vamos a View -> Show Console. Ahí pondremos lo siguiente.

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

Después, podemos pulsar Ctrl + Shift + P, escribir Install y pulsar ENTER. Se os mostrara una serie de plugins que se pueden instalar.

Algunos Plugins Útiles

Emmet
Este es uno de mis favoritos y el de otros también xD.
Antes llamado Zen Coding, permite agilizar de una manera sorprendente  el trabajo que nos lleva escribir código html. Ejemplo:

#mimenu>ul>li*5

Al pulsar TAB, esto automáticamente lo convertirá en,

<div id="mimenu">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Prefixr
Nos permite hacer más compatible nuestro código CSS con todos los navegadores. Seleccionamos el código CSS que queramos procesar, pulsamos Ctrl+ALT+X y nos transformará el código automáticamente.

Ejemplo:

body {animation: slide 1s alternate;}

Al pulsar Ctrl + Alt + X obtendremos:

body {-webkit-animation: slide 1s alternate;
-moz-animation: slide 1s alternate;
-ms-animation: slide 1s alternate;
-o-animation: slide 1s alternate;
animation: slide 1s alternate;}

Code Alignment

Este plugin es para los que lo tienen que tener ordenadito y perfectamente visible todo.
Ejemplo:

<?php
$var = 'lalala';
$omsadsdasdadg = 'daskjdsajkfafhafa';
$a = 'a';
?>

Al seleccionarlo y pulsar, Ctrl + Alt + A se convertirá a:

<?php
$var           = 'lalala';
$omsadsdasdadg = 'daskjdsajkfafhafa';
$a             = 'a';
?>

Fetch
Es un plugin que permite descargar contenido remoto y pagarlo en nuestro documento.
Al instalar el plugin, podemos configurarlo o utilizarlo mediante la combinación de teclas Ctrl + Shift + P, escribiendo Fetch y eligiendo ya sea la opción "Fetch" o "Fetch: Manage remote files".

En Fetch, podemos elegir archivo simple o varios archivos (paquetes/frameworks) mientras que en "Fetch: Manage remote files" podemos configurar los archivos remotos. Por defecto viene con jQuery y html5_boilerplate.

SFTP
Es como un FTP integrado en SublimeText 2. Para utilizarlo, después de instalar el plugin, debemos reiniciar ST2. Una vez reiniciado, nos vamos a File -> SFTP -> Setup Server. Ahí podemos indicar los datos de nuestro server. Por ejemplo, un archivo básico podria ser:

{
    // sftp, ftp or ftps
    "type": "ftp",
    "sync_down_on_open": false,
 
    "host": "ftp.miservidor.net",
    "user": "miusuarioftp",
    "password": "mipassowordFTP",
    "port": "21",
 
    "remote_path": "/",
    //"file_permissions": "664",
    //"dir_permissions": "775",
 
    "connect_timeout": 30,
}

Una vez editado, guardamos el archivo con el nombre que queramos y nos vamos a File -> SFTP -> Browse Server. Ahí elegimos el nombre del archivo que acabamos de guardar y se nos conectara automáticamente.

Permite la edición en tiempo real, borrar y cambiar de nombre..

ColorPicker

Mediante el atajo Ctrl + Shift + C, permite abrir el tipo seleccionador de color de Windows/Linux/OS X.
Inserta los values tipo HEX (#FFFFFF).

TrailingSpaces

Aveces al escribir codigo nos dejamos espacios en blanco, que sobran y no son necesarios. Este plugin lo que hace es eliminarlos.

Hay un pequeño problema y es que tiene un conflicto con Sublime Text 2, que por defecto la combinación Ctrl + Shift + T abre el ultimo documento. Asi que lo que hay que hacer es ir a Preferences -> Key Blindings User,

Y si esta vació, añadir esta linea:

[
   {"keys":["ctrl+alt+k"], "command": "delete_trailing_spaces" }
]

En caso de que no este vació, añadir esto a la ultima linea

{"keys":["ctrl+alt+k"], "command": "delete_trailing_spaces" }

Esto hará que se active pulsando Ctrl + Alt + K.



PD:  Podemos automatizar esto al guardar los archivos, cambiando en Preferences -> Settings - Default,
el "trim_trailing_white_space_on_save": false, por true.

Clipboard History

Puedes manejar el historial de tu portapapeles y así no tener que salirse del programa / distraerse para copiar/pegar código =).

Temas

Aunque el tema de Sublime Text 2, me encanta, hay otros igual de buenos. Como SODA (uno de los mas populares).

Para instalar un tema, debemos descargarlo y meter su carpeta en la carpeta "Packages" de Sublime Text 2.

Luego, debemos ir a Preferences -> Settings-Default, buscar

"theme": "Default.sublime-theme",

y cambiar el Default por el nombre de nuestro tema.

Podemos descargar el tema Soda desde esta url:
https://github.com/buymeasoda/soda-theme/



Diccionarios

No lo he mencionado en los anteriores posts porque en la build 2181 tenia un problema y no aceptada caracteres como la ñ o acentos (í ó etc..).

En la versión final (2) parece que ha sido solucionado así que os dejo el sitio donde podéis descargarlos y la carpeta donde hay que meterlos.

https://github.com/SublimeText/Dictionaries

Deben descargar tanto el .dic como el .aff y .txt.
Una vez descargados los metemos en Sublime Text 2/Data/Packages/User/Diccionarios(opcional).

Cerramos ST2, lo volvemos a abrir y desde el menú seleccionamos "View -> Dictionary -> User -> [Lenguaje]".

Para activar/desactivar debemos ir a View -> Spell Check o simplemente pulsar F6.

Contribuir

Este post lo he creado para que puedan contribuir con sus aportaciones. Ya sean snippets, temas, plugins, atajos y otras cosas. Siéntete libre de compartir.

Si quieren saber como crear un plugin pueden visitar este sitio:
http://net.tutsplus.com/tutorials/python-tutorials/how-to-create-a-sublime-text-2-plugin/

PD: Ultima actualizacion: 30/11/2012 - Añadidos plugins y diccionarios al post principal.

Saludos y gracias por leer.

Bueno, esto es un juego muy sencillo, se trata de postear una razón divertida de porque la persona arriba de tu post debería ser baneada (de mentira).

Empiezo yo:

Como no hay nadie encima mio, baneo a drvy por troll.


Saludos

Un dia antes, y un dia despues 



Saludos

Bueno, pues a falta de unos 5 minutos (en España) para el año nuevo..



Que os vaya todo bien..
Que haya menos trolls..
Que se atraganten todos los politicos con las uvas
Que sea un año mejor..

Yo ire a convertir el 60% de agua que tengo en mi cuerpo en alcohol..

Saludos

Bueno pues tengo un problema con las imágenes de wolfbcn en sus posts (foro noticias).

Resulta que no se ven.



He probado borrando el cache, cambiando DNS (uso las de google) etc etc y nada xD
Aclaro que ocurre en los navegadores principales (Firefox,Chrome,IE)..

Si intento ver la imagen me lleva directamente a

La única manera es dar a citar (coger la url y visitarla) y ahí si que se arregla.
A alguien mas le ocurre ?


Edit: Se me olvido mencionar que no es problema de temas porque tampoco las puedo visualizar en los demás temas.

Saludos

Bueno, no soy de crear muchos temas pero hoy me dio por revisar mis posts antiguos y salí con unos cuantos divertidos.

Pero el que se lleva el premio es este:
http://foro.elhacker.net/foro_libre/el_chiste_mas_friki_de_la_historia-t255798.0.html
(no por el chiste sino por los posts después de este)


Pongan ustedes algunos. (tienen que ser de este foro  ) que os hayan hecho mucha gracia.



Saludos

Pues esta captura ya me ha salido varias veces a lo largo del dia. No sale cada vez que entro pero aveces si aveces no.




Saludos