Share
Hoy marca la primera entrada en una nueva serie "Web Dev Q&A". A menudo me envían un correo electrónico con respecto a varias preguntas relacionadas con el desarrollo web. Aunque algunos son más específicos que otros, muchos de estos, estoy seguro, atraerían a todos nuestros lectores. Como tal, cada semana más o menos, publicaremos un nuevo grupo de preguntas y respuestas de la comunidad, tanto en forma de artículo como de video, para su conveniencia..
Esta semana, hablaremos sobre las funciones de devolución de llamada de JavaScript, un compilador de MENOS y esos flotantes CSS complicados..
"Hola Nettuts +: ¿hay una manera fácil de crear funciones de devolución de llamada con JavaScript regular, similar a lo que podemos hacer con jQuery?"
Por supuesto. Esto es fácil. Por ejemplo, vamos a crear una función genérica..
Accentsconagua
función doSomething (name) alert ('Hello,' + name); doSomething ("John and Kate Plus 8"); Cuando se le llame, como se esperaba, el navegador alertará "Hola, John y Kate Plus 8". Ahora, si queremos pasar también una función de devolución de llamada, como el segundo parámetro de la función "hacer algo", simplemente podemos pasar una función anónima.
función doSomething (name, cb) alert ('Hello,' + name); doSomething ("John and Kate Plus 8", function () alert ('esta función de devolución de llamada solo se ejecutará después de que doSomething tenga');); Observe cómo hemos agregado un segundo argumento a la hacer algo() función: "cb". Usted es libre de etiquetar esto como desee, aunque es común mantenerlo como "cb", que se refiere a "dotodossegundoack. "Ahora, esa función anónima será representada a través de esta variable.
El último paso es simplemente llamarlo al final de la función..
función doSomething (name, cb) alert ('Hello,' + name); cb (); // ahora ejecute la función de devolución de llamada doSomething ("John and Kate Plus 8", function () alert ('esta función de devolución de llamada solo se ejecutará después de que doSomething tenga');); Estimado Nettuts +: Me encantó tu video LESS.js, pero no quiero usarlo para la producción. ¿Hay una aplicación para Coda que compile automáticamente mi código en su lugar??
Cosa segura. La mejor solución que pude encontrar se llama LESS.app.
Después de descargarlo (gratis), simplemente arrastre la carpeta de su proyecto a la aplicación, lo que le indica que reloj Todos los archivos .LESS. En este punto, puede continuar trabajando en su proyecto, como de costumbre. Cada vez que guarde, el compilador se ejecutará, lo que genera / actualiza un archivo creado automáticamente. style.css expediente. Cuando haya terminado de desarrollar su aplicación, solo necesita cambiar las referencias de la hoja de estilo de style.less a style.css, en consecuencia. ¡Fácil! Ahora no hay razón para no aprovechar LESS, a menos que esté usando una solución diferente, como Sass.
"Hey Nettuts +: Así que tengo un menú de navegación con una lista de enlaces horizontales; pero cuando configuro un color de fondo en el menú, ¿no aparece nada? ¿Por qué? Aquí está mi código:"
Problema de menú
Está bien, esto es una confusión común. La razón por la que el fondo de "negro" no se muestra es porque has flotado todos los elementos de la lista a la izquierda. Cuando lo haces, hace que el elemento padre (#nav) se contraiga. Hay dos soluciones:
"Overflow: hidden" es un ingenioso truco que solo se descubrió en los últimos años, alrededor de 2005. Al aplicar un valor de "hidden" o "auto" a la propiedad "overflow", parece recordar al elemento principal que ¡Se supone que está envolviendo a sus hijos! La lógica es un poco extraña, lo admito; Sin embargo, sin embargo, funciona..
#nav fondo: negro; desbordamiento: oculto; / * ta da! * /
La configuración de "desbordamiento" funciona el 80% del tiempo, sin embargo, puede haber ocasiones en las que debamos superponer los límites del elemento principal, en cuyo caso "desbordamiento: oculto;" cortará la imagen / elemento fuera. La segunda solución es utilizar el popular método "clearfix". Lo usarás con frecuencia, por lo que te recomiendo que sigas adelante y guardes el código en tu herramienta favorita de administración de fragmentos, como TextExpander, Texter o Snippets..
Primero, vuelva a su marca, y aplique una clase de "clearfix" al elemento padre.
A continuación, agreguemos el estilo apropiado para esta clase. La funcionalidad general es que usamos la clase psuedo "después" en el elemento primario para aplicar el contenido, y luego borramos ese contenido, que esencialmente imita la adición de
a la parte inferior de su margen de beneficio. Sin embargo, este método es más inteligente y no arruina nuestro hermoso margen semántico..clearfix * zoom: 1; / * triggers tiene haslayout en versiones anteriores de iE .clearfix: after content: ""; bloqueo de pantalla; Limpia los dos; visibilidad: oculta; tamaño de letra: 0; altura: 0;
"hasLayout es importante porque obliga al elemento a tener una forma rectangular".
Como puede ver, usamos ": after" para agregar un espacio en blanco después Todo el contenido flotado. Luego configuramos la pantalla para bloquearla y borrarla, lo que obliga al padre a envolver a los hijos flotantes. Por último, establecemos algunas reglas generales de visibilidad, tamaño de fuente y altura para garantizar que este código no afecte nuestro diseño en algunos navegadores.
Cabe destacar la declaración "* zoom: 1" en la parte superior. La propiedad "zoom" nos permite activar la propiedad "hasLayout" propietaria de IE. hasLayout es importante porque obliga al elemento a tener una forma rectangular. Esto significa que el contenido del elemento no puede fluir alrededor de otras casillas, lo que a menudo causará problemas importantes de diseño en su sitio web. Cuando la propiedad propietaria de Microsoft "hasLayout" es igual a verdadera, el elemento "tiene diseño". Afortunadamente, podemos activar esto agregando propiedades específicas a nuestros selectores, incluido el "zoom". Otros desencadenantes hasLayout, para nombrar solo un puñado, son:
Eso lo hará para esta entrada emblemática "Web Dev Q&A". Si tiene una pregunta de desarrollo web "no muy complicada" para nosotros, puede:
Gracias por leer y mirar!
