Tu primer pensamiento al ver este articulo será “Lo leeré luego”.
Pero no lo harás. Deja de lado el impulso por hacer cualquier otra cosa y lee esto ahora! Te tomará un par de minutos y te ahorrará horas.
He escrito un libro sobre la procrastinación, pero hoy voy a hablar solo de una técnica muy simple para vencer nuestro nemesis favorito. Es muy facil, pero como con todo, se necesita un poco de practica.

Empecemos:
Identifica lo mas importante que tengas para hacer hoy.
Decide hacer solo una pequeña parte de ello – el primer minuto, 5 minutos, o incluso 30 segundos de ello. Empezar es la única cosa en el mundo que importa.
Elimina todas las distracciones. apaga el ordenador si no lo necesitas, cierra todos los programas que no vayas a utilizar. Tienes que ser sólo tú y tu tarea.
Siéntate y piensa en comenzar, no en hacer toda la tarea, simplemente en comenzar.

Concéntrate, comenzaras a tener impulsos que te desviaran de tu tarea. Querrás checkear tu correo, facebook, twitter, algun sitio de humor, o cualquier otra cosa. Querrás jugar algun juego, hacer una llamada, ver TV. Presta atención a estos impulsos, pero no te muevas. Nota esos impulsos, pero no los sigas, déjalos pasar. Los impulsos podrán ser intensos, pero luego pasaran, como una ola. Cada uno de ellos lo hará.
Nota también que tu mente tratara de buscar una justificación para no realizar la tarea. También déjalos pasar.

Comienza y el resto fluirá.

Traducción libre de este articulo.

$ sshfs [nombre de usuario]@[host]:/[directorio remoto] /[directorio local]

Pero de esta forma, tendríamos que ingresar este comando cada vez que quisiéramos montar esta unidad. Para hacerlo de manera automatica, al inicio del sistema en GNU/Debian, agregamos esta linea a nuestro .bashrc (se ubica en nuestro home, en caso de que no exista deberemos crearlo):

$ echo "[contraseña]" | sshfs [user]@[host]:/[directorio remoto] /[directorio local] -o workaround=rename -o password_stdin

Por ejemplo, en el archivo /home/javier/.bashrc:

$ echo "asd123" | sshfs javier@ejemplo.com:/home/javier/ /home/javier/remoto -o workaround=rename -o password_stdin

Para utilizarlo, incluimos jQuery (en mi caso siempre lo cargo desde Google) y el plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.autoSuggest.minified.js" type="text/javascript"></script>

Se puede utilizar de la siguiente manera:

<script type="text/javascript">
$(function(){
    $("#auto").autoSuggest(data);
});
</script>

Donde #auto es el INPUT que queremos utilizar y data son las sugerencias, estas pueden ser obtenidas desde un array incluido en el mismo script (sin hacer una llamada ajax) o desde una URL (utilizando ajax). Veamos como un ejemplo utilizando un array dentro del mismo script:

<script type="text/javascript">
 data = {items: [
    {value: "Mick Jagger"},
    {value: "Johnny Storm"},
    {value: "Richard Hatch"},
    {value: "Kelly Slater"},
    {value: "Rudy Hamilton"},
    {value: "Michael Jordan"}
]};
$("#auto").autoSuggest(data.items);
</script>

O haciendo una peticion ajax:

<script type="text/javascript">
$("#auto").autoSuggest("auto.php");
</script>

Donde el script PHP puede ser algo como esto:

<?PHP
    $input = $_GET["q"];
    $data = array();
    // query your DataBase here looking for a match to $input
    $query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%$input%'");
    while ($row = mysql_fetch_assoc($query)) {
        $json = array();
        $json['value'] = $row['id'];
        $json['name'] = $row['username'];
        $json['image'] = $row['user_photo'];
        $data[] = $json;
    }
    header("Content-type: application/json");
    echo json_encode($data);
?>

Cuando se van seleccionando las opciones, estas se guardan en un campo oculto separadas por coma. El name del campo oculto es as_values_ seguido del string que especifiquemos nosotros con la opcion asHtmlID. Por ej, si queremos que el name sea as_values_nombres:

<script type="text/javascript">
$("#auto").autoSuggest("auto.php", {asHtmlID: "nombres"});
</script>

Luego con PHP usamos:

$_POST['as_values_nombres'];

Tenemos algunas opciones mas:

selectionLimit: numero (Valor por defecto: Sin limite) Especifica la cantidad máxima de items que se pueden seleccionar, por ej si queremos que solo se puedan seleccionar 3 items:

<script type="text/javascript">
$("#auto").autoSuggest("auto.php", {asHtmlID: "nombres", selectionLimit: 3});
</script>

limitText: string (Valor por defecto: “No More Selections Are Allowed”) Texto que se muestra cuando se alcanza el limite especificado con selectionLimit.
emptyText: string (Valor por defecto: “No Results”) Texto que se muestra al no encontrar coincidencias
selectedItemProp:string (Valor por defecto: “value”) El nombre de la propiedad del objeto que se va a usar para mostrar.
selectedValuesProp:string (Valor por defecto: “value”) El nombre de la propiedad del objeto que se va a guardar en el campo oculto.
searchObjProps:string (Valor por defecto: “value”) El nombre de la propiedad del objeto que se va a usar para la busqueda. Si se quieren usar varias opciones se las puede separar con coma.
El uso de las tres opciones anteriores puede ser algo confuso, pero puede ser mas facil entenderlo con el siguiente ejemplo:

<script type="text/javascript">
var data = {items: [
    {value: "21", name: "Mick Jagger", searchname: "Mick Jagger, Mick Jager"},
    {value: "43", name: "Johnny Storm", searchname: "Johnny Storm"},
    {value: "46", name: "Richard Hatch", searchname: "Richard Hatch"},
    {value: "54", name: "Kelly Slater", searchname: "Kelly Slater"},
    {value: "55", name: "Rudy Hamilton", searchname: "Rudy Hamilton"},
    {value: "79", name: "Michael Jordan", searchname: "Michael Jordan"}
]};
$("#auto").autoSuggest("auto.php", {selectedValuesProp: "value", selectedItemProp: "name", searchObjProps: "searchname"});
</script>

De esa forma value se guardara en el campo oculto y sera enviado con el formulario (Si se selecciona a Mick Jagger y a Kelly Slater, entonces lo que se enviará con el formulario será: “21, 54″), name se mostrará al usuario y searchname se usará para buscar coincidencias con el texto ingresado.

startText: string (Valor por defecto: “Enter Name Here”) Texto a mostrar cuando el campo de texto esta vacío.
preFill: objeto o string (Valor por defecto: Objeto vacío) Opciones ya seleccionadas cuando se carga la pagina. Se le puede pasar un string con las opciones separadas por coma o un objeto.
queryParam: string (Valor por defecto: “q”) Nombre del parámetro que se va a usar para la petición ajax. auto.php?q=
retrieveLimit: numero (Vacío por defecto) Puede ser usado para especificar un limite en el query ajax ya que agrega un &limit= en el mismo.
extraParams: string (Vacío por defecto) Sirve para especificar cualquier otro parámetro en la petición ajax. En el caso de que sean varios, recordá seprarlos con un andpersand (&).
matchCase: true o false (Valor por defecto: false)  hace que la busqueda sea case sensitive en caso de ser true.
minChars: numero (Valor por defecto: 1)  Cantidad de caracteres que son necesarios para que comience la busqueda.
keyDelay: numero (Valor por defecto: 400) Tiempo de espera en milisegundos antes de que comience la búsqueda. El valor por defecto es 400.
showResultList: true o false (Valor por defecto: true) Si se establece en false, la lista desplegable con las opciones nunca se mostrará.
start: Permite establecer una función personalizada que se activa al ejecutar AutoSuggest (en la mayoria de los casos, al cargar la pagina).
selectionClick: Permite establecer una funcion personalizada que se activa cuando se hace click sobre una opcion ya haya sido seleccionada previamente.
selectionAdded: Permite establecer una funcion personlizada que se activa cuando se selecciona una opción de la lista.
selectionRemoved: Permite establecer una función personalizada que se activa cuando se elimina una opción ya seleccionada. Tal vez un efecto fadeout en el elemento eliminado.
beforeRetrieve: Funcion que se aplica antes de comenzar a buscar. Se puede usar por ej, para mostrar un gif “loading” mientras se hace la peticion ajax.
retrieveComplete: Funcion que se ejecuta cuando se termina de buscar. Se puede usar para ocultar el gif antes mencionado.
resultClick: Funcion que se ejecuta al hacer click sobre alguna de las opciones de la lista desplegable.
resultsComplete: Permite especificar una funcion personalizada a ejecutarse una vez desplegada la lista de resultados.

Vi esta tira en xkcd y me pareció genial

HTML5 nos trae varias novedades

Placeholder:

Si no disponemos de las características de los nuevos formularios HTML5, la forma común de hacer un placeholder sería con JavaScript jugando con los eventos de focos. Hoy en día, podemos con este atributo podremos agregar un texto que se verá en el input cuando este esté vacío y no tenga el foco.

<input type="text" placeholder="Search Bookmarks and History">

Actualmente solo es compatible con Chromium/Chrome y Safari 4, para verlo en funcionamiento entrá acá.

Autofocus:

Otra muy buena ventaja de los formularios en HTML5, este es otro claro ejemplo que permite el control del autofoco sin hacer uso de JavaScript, como se hubiera hecho antes. Como su nombre lo indica, con autofocus establecemos que un input tendrá el foco. No tiene mucha ciencia, simplemente agregamos “autofocus” en el elemento:

<input id="q" type="text" autofocus>

Si tenés un molesto script de autofoco en tu web, no te preocupes ya que seguirá funcionando sin importar que el navegador sea compatible o no con el atributo autofocus, pero si queres que el script se ejecute solo si no lo es podes agregar un if de esta forma:

<script>
  window.onload = function() {
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("q").focus();
    }
  }
</script>

Nuevos tipos de INPUT

HTML5 nos trae varios nuevos tipos de INPUT, en los navegadores que no los soporten, serán tomados simplemente como type=”text”.

Uno de los nuevos tipos de input es el tipo “email” que nos servirá, justamente, para campos en los que se requiera ingresar una dirección de mail.  Si tenés Opera y ves este demo vas a ver un pequeño icono junto a los campos de este tipo y en iPhone,  el teclado virtual se transformará de esta forma:

Tambien tenemos el tipo URL que nos sirve para direcciones web

 <input type="url">

Para numeros tenemos 2 nuevos tipos, el primero es “number”:

Que como vemos nos deja asignar restricciones de la misma manera que lo hace el tipo “range”:

<input type=”range”  min=”0″  max=”10″  step=”2″  value="6">

Otro punto al que se le prestó mucha atención es al tema fechas, para su manejo contamos con diferentes tipos de campo. Acá dejo algunas capturas de como se ven los diferentes campos para fechas en Opera (Único navegador que actualmente los soporta):

type=”date”

type=”mounth”

type=”week”

type”time”

type=”datetime”

Si queres implementar tu script de selección de fechas solo en los exploradores que no son compatibles con estos tipos de campos, podes implementar una comprobación de esta forma:

<script>
  var i = document.createElement("input");
  i.setAttribute("type", "date");
  if (i.type == "text") {
    // No soportado
  }
</script>

Pero esto no termina aća, además tenemos un nuevo tipo de campo especialmente pensado para cajas de búsqueda llamado “search”.

Si usas este tipo de campo en cualquier explorador actual no vas a notar ninguna diferencia, a no ser que uses Safari sobre MacOS X en donde vas a ver el campo type=”search” con las esquinas redondeadas y al empezar a escribir aparecerá una pequeña cruz a la derecha que nos permite borrar el contenido del campo.

Por ultimo tenemos el tipo “color”, que actualmente no es soportado por ningún explorador, pero que en teoría serviría para colores en hexadecimal. Y seguramente será complementado con un selector de color.

Conclusión:

Estas nuevas implementaciones nos simplificaran mucho el trabajo ya que contaremos con soporte nativo para los tipos de datos que mas se manejan en los formularios (bueno, tal vez algunos sean mas inútiles que otros), lo que no hará mas fácil por ej la validación desde el lado del cliente, por cierto, me olvidaba del nuevo atributo  required.

<form>
 <p><label>Nombre: <input name="name" required></label></p>
 <p><label>E-mail: <input name="email" type="email" required></label></p>
 <p><label>URL: <input name="url" type="url"></label></p>
 <p><label>Comentario: <textarea name="comment" required></textarea></label></p>
 <p><input type="submit" value="Enviar"></p>
</form>

Tendremos que esperar unos años hasta que estas características sean totalmente compatibles con los diferentes navegadores, Opera es uno de los que mayor compatibilidad tiene, seguido por Chrome y Safari, pero Internet Explorer y Firefox todavia no soportan ninguna de estas características. Seguramente en los próximos meses empezaremos a ver novedades al respecto en Firefox, pero Microsoft creo que como siempre va a tardar algun tiempo mas.

Pueden leer el articulo original (en ingles) en diveintohtml5.info.

Via: Techtear

Para los linuxeros la mala noticia es que al igual que en las anteriores versiones, se sigue sin ofrecer soporte para Xorg 1.7.

Hace pocos días, google lanzó su propio servicio para acortar urls, el cual puede utilizarse desde la toolbar de Google para compartir los enlaces directamente en diferentes redes social y con el nuevo servicio que ofrece FeedBurner para compartir nuestros feeds automaticamente en twitter.

Personalmente nunca me gusto la toolbar de Google y no pienso instalarla simplemente para utlizar este servicio. Asi que me puse a buscar y encontré 2 metodos diferentes, por un lado esta web en la que ingresamos la URL que queremos acortar y nos devuelve la URL corta y esta extensión para Google Chrome (o Chromium ) que nos agrega un boton junto a la barra de direcciones.

Viendo que la moda de los acortadores de URLs en algun momento va a desaparecer, creo que la mejor forma de evitar la perdida de nuestros links con un eventual cierre de las webs mas pequeñas es utilizar los servicios mas conocidos, como bit.ly (que por cierto acaba de lanzar la beta de su servicio premium luego de la aprición de goo.gl), tinyurl.com y ahora goo.gl que creo que es el mas confiable ya que es muy poco probable que google cierre el servicio.

Visto en Techie Buzz

Lo que se ve en el grafico es el historial de estadisticas de uso de los diferentes navegadores desde enero de 2002 hasta agosto de 2009. El mismo fue realizado por axiis.org en base a los datos de w3schools.com
Se ve un claro retroceso del explorador de Microsoft que en el 2002 era usado por cerca del 90% de los internautas y actualmente tiene poco menos del 40% del mercado, superado unicamente por Firefox con el 47%.

Mozilla Firefox: 47,7 %
Internet Explorer: 39,3 %
Google Chrome: 7 %
Safari: 3,3 %
Opera: 2,1 %

Nota: Cualquier parecido del grafico con el logo de algun explorador es mera coincidencia.