Alguien en el brillante equipo de Google Chrome ha decidido (seguro que con buen criterio) el cambiar la localización de la pestaña del emulador de Google Chrome.
Esta funcionalidad es muy útil si deseas emular que estas viendo una web con alguna determinada versión de móvil o tablet.
¡Guala!, después de buscar un buen rato he encontrado la nueva localización.
Estos son los pasos que debes de seguir para abrirlo:
- Abrir el panel de Settigns, situado en la parte superior derecha del panel
- Comprobar que tienes marcada la opción de «Show ‘Emulation’ view in console drawer» y cerrar la ventana de configuración
- Abrir la pestaña de «Sources»
- Pulsa «Esc» y aparecerá un nuevo panel en la parte inferior
- Selecciona la pestaña de «Emulation» y listo!
La solución la he encontrado en esta página
A algunos tipos de campo de formulario no es fácil aplicarles cambios en el estilo, como por ejemplo, los radio button, los checkbox o los campos de subida de ficheros.
Con el plugin que hoy os propongo aquí, podremos falsear los campos de tipo file fácilmente.
La clave está en ocultar el campo real (el que no podemos editar) y crear un nuevo elemento que lo imite, pero en el que sí podamos aplicar todos los cambios deseados. Posteriormente, por medio de Javascript haremos que al hacer clic en el campo falso, se abra la ventana de diálogo, para la elección del fichero en cuestión.
Estructura HTML:
<div class="customFileInput inputWithButton inputWithButton_150">
<div class="inputWrap fileName"></div>
<div class="btWrap">
<a class="bt" href="#">Select File...</a>
</div>
<input class="text" type="file" placeholder="Placeholder" />
</div>
Plugin jQuery:
$.fn.customFileInput = function () {
return this.each(function() {
var t = $(this),
input = t.find('input'),
fakeTrigger = t.find('.bt'),
fakeInput = t.find('.fileName');
input.change(function () {
// get only file name, with out path
var fileName = input.val().split('\\').pop();
fakeInput.html(fileName);
});
input.click(function (e) {
e.stopPropagation();
})
t.click(function (e) {
e.preventDefault();
input.click();
});
});
};
$(function () {
$('.customFileInput').customFileInput();
});
Las propiedades CSS para darle estilo no las pongo aquí, ya que simplemente estoy usando la nueva versión del framework paraGridma que estamos termiando de desarrollar en Paradigma
Llamarme rarito, pero soy de los que le gusta tener una nota lo más alta posible en los test de «Page Speed» y me gusta que mis páginas carguen lo más rápido posible. Para intentar conseguir esto una de las recomendaciones es cargar tus ficheros Javascript de manera diferida, después de que el contenido de la página haya sido cargado y mostrado, pero esto no es tan fácil como podría parecer.
Hay varios métodos, y no todos ellos valen para todos los navegadores. Según he leído en el artículo Defer loading of javascript de Patrick Sexton este es el método que recomienda Google:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else
window.onload = downloadJSAtOnload;
</script>
Esta porción de código la debemos de insertar justo antes de la etiqueta </body>, al final de nuestro documento html.
Asegúrate que la ruta al fichero es correcta. En este ejemplo el fichero defer.js debe de estar en el mismo directorio que el fichero HTML.
Parece una práctica fácil de implementar y con buenos resultados, así que ¿por qué no usarla?
I’m using LESS in the new version that i’m developing of the framework ParaGRIDma.
To render the .less file in a .css i’ve choose the software WinLess. I also evaluate Simpless that is a more beautiful software to do the same task, but it give me some error editing the file. WinLess work like a charm.
Making loops in less
@iterator: 12;
.loop (@index) when (@index > 0) {
.g-@{index} { width: (100% * @index / @iterator) }
.loop(@index - 1); // next iteration
}
.loop (0) {} // exit loop
.loop (@iterator); // draw loop
Convering dimesions in less
Sometimes you want to change dimensions in your CSS. To do this you only need to add 0[unit]
@context = 12px;
@context/10 + 0em; // returns 1.2em;
Make color variations in less
You can convert given color by adding other color. For example:
@linkColor: #2a85e8;
@linkColorHover: (@linkColor + #111);
Importing files in less
If you want to import some other css file you can do it like:
@import "normalize.css";
If you want to process this CSS file like a LESS files do this:
@import (less) "normalize.css";
Nested rules in less
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Esta simple función te devuelve un array con cada uno de los parametros de la URL que le pases:
function getUrlParams(url) {
var vars = {};
var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
En mi último proyecto necesito ajustar el tamaño de texto según el tamaño de su contenedor. Inicialmente opte por usar el plugin FitText.js, que aunque funciona muy bien no era lo que necesitaba, ya que yo desconozco el tamaño de la cadena de texto, y con fitText necesitas saberlo para proceder a ajustarlo.
Por eso, y gracias a mi compañera Nerea, voy a usar esta función, que encaja mejor con lo que busco:
ACTUALIZACIÓN (Nov-13): La función que usaba tenía serios problemas de rendimiento, y la he actualizado mejorando bastante su comportamiento y funcionalidad. A parte de mejorar el rendimiento, tambien he añadido 2 parametros. El primero «set_max_size» es para decirle al plugin si quieres limitar el redimensionado a un tamaño máximo (el dado por el tamaño del texto en el CSS) y si quieres un tamaño mínimo «min_size»
leer mas
Últimamente no dejo de hacer WordPress cada dos por tres, y es muy habitual que se repitan siempre los mismos problemas de unos a otros. He decidido redactar este artículo con los principales pasos que yo estoy siguiendo en mis proyectos para que WordPress tenga la mayor seguridad posible y de menos problemas de configuración.
leer mas
Today I was looking for a jQuery Colorpicker plugin for my new aplication (an online magazine generator)
I found a lot of options, and the one that I like more was the jQuery Color Picker of izzy. I’d download it, but when i saw the code there was a lot of things I didn’t like, so I have recode a little bit the plugin to fit my need.
leer mas
Gracias al artículo publicado por Emilio Cobos, he conocido esta posibilidad para evitar que Internet Explorer emule otra versión inferior.
Puede que la conozcáis o no, pero hay una pequeña cabecera usada por IE llamada X-UA-Compatible, que puede hacer que IE9 se comporte como si fuera IE7 (por ejemplo). Esto causa bastantes problemas, porque además de usar un navegador menos compilante con los estándares, crea inconsistencias entre versiones, para asegurarse de que IE10 actúa como IE10, IE9 como IE9, etc… y que IE6/7/8 usen Chrome Frame si está instalado:
# Eliminar www.
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge,chrome=1"
# Sólo queremos añadirlo para páginas HTML, el resto es un desperdicio de ancho de banda
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
Si señor, muy útil. Gracias Emilio!
Desde hace mucho tiempo tengo pesadillas en la noche por lo mal que muestra el navegador Google Chrome las tipografías descargadas desde web (web fonts).
Renderiza mal incluso las que importas desde Google Fonts.
Por esto hoy me he llevado una gran alegría cuando he leído en el artículo de Sam Goddard la solución, ¡Y HA FUNCIONADO!
Al parecer a Chrome no le gusta mezclarse con otros formatos de letras, y hay que definir la llamada a la fuente SVG a parte
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}
}
De este modo la tipografía se muestra fina fina!
Espero que este artículo os sea de tanta ayuda como me ha sido a mi.
