¿Conoces HTML y CSS y eres capaz de crear páginas web estáticas simples (y no tan), pero te gustaría darles más "vida" e interactividad? Tiene obras (pinturas, fotografías, poemas, una colección de sellos, etc.) que le gustaría compartir con el mundo, pero no puede crear un sitio de cartera o blog donde pueda publicarlos y actualizarlos sin un esfuerzo adicional. ? ¿O sueña con llevar el diario de un viajero, o recolectar recetas culinarias inusuales, o hacer un seguimiento de su actividad física y hacer todo esto en línea en su propio sitio web? ¿Quizás tenga una mascota favorita, cuyo cuidado requiere procedimientos especiales, y deben rastrearse y registrarse rápidamente?
Pero la mención de JavaScript lo lleva a un temblor fácil (y a veces no tan), y la cantidad de tecnologías y conceptos que necesita dominar para realizar sus ideas lo lleva a la confusión y la desesperación. Como resultado, te preguntas: “¿Por qué la programación web debería ser tan difícil? ¿Es realmente imposible encontrar algo para hacerlo más fácil?
Entonces llegaste al lugar correcto. Después de leer el artículo, recibirá una herramienta con la ayuda de la cual, estoy seguro, puede realizar, si no todas, muchas de sus ideas, similares a las enumeradas anteriormente.
El autor de las imágenes originales: Mart Virkus (toggl.com)Desarrolladores front-end expertos y con experiencia, no se apresuren a cerrar el artículo con gritos de que ahora habrá algo para "rozar" a los recién llegados y no tienen nada que hacer aquí. Estoy seguro de que también puedes aprender algo útil para ti. Lo más importante para recordar: si algo se vuelve simple para los principiantes, ¡se volverá automáticamente simple para todos! Entonces, hasta cierto punto, simplificará tu vida. Esto no está mal, ¿de acuerdo?
Así que al punto! Este artículo estará completamente dedicado a
Mavo .
Mavo es un nuevo enfoque para desarrollar aplicaciones web interactivas
solo escribiendo HTML y CSS, sin la necesidad de escribir código JavaScript e implementar su propio servidor.
Mavo está siendo desarrollado por el
Grupo de científicos
Haystack del Laboratorio de Ciencias de la Computación e Inteligencia Artificial del Instituto Tecnológico de Massachusetts (
MIT CSAIL ) bajo el liderazgo de
Leah Veru .
¡Sigue al conejo blanco!
¿Quieres aprender un poco más sobre qué ideas fueron la base de Mavo, qué características de sus predecesores absorbió, cuáles desarrolló y cuáles tuvo que abandonar y por qué? Luego recomiendo leer estas dos publicaciones, especialmente preparadas para el foro anual dedicado a las innovaciones en el campo de la interacción hombre-máquina: el Simposio ACM sobre software y tecnología de interfaz de usuario (UIST) :
- Mavo: Creación de aplicaciones web interactivas basadas en datos mediante la creación de HTML .
- Ampliación de un lenguaje de expresión reactiva con acciones de actualización de datos para la creación de aplicaciones de usuario final .
¡Una pequeña digresión para los lectores de Rusia!
El sitio de Mavo está alojado en servidores de Netlify , cuyas direcciones están en la lista negra como resultado de la "guerra" con el mensajero de Telegram . Esto significa que los recursos alojados en estos servidores, así como todos los servicios relacionados, están bloqueados en Rusia (al menos en el momento de escribir este artículo).
Sin embargo, hay buenas noticias: Lea Verou y yo estamos trabajando activamente para resolver este problema. Espero que solucionemos esto pronto también. Hasta entonces, utilice, por ejemplo, una VPN para trabajar con Mavo (esto es cierto tanto al acceder al sitio web de Mavo como al estudiar demostraciones en Codepen , así como al crear sus propias aplicaciones web).
(ACTUALIZACIÓN) Aquellos que no estén listos y / o no quieran conectarse a la VPN pueden jugar con Mavo en Stackblitz o conectarlo a su proyecto a través de cdnjs .
Estoy convencido (y creo que no estoy solo) de que la mejor manera de "sentir" una nueva tecnología y evaluar de lo que es capaz es construir algo útil con su ayuda. No es muy difícil, de lo contrario es posible que no veamos los bosques detrás de los árboles, pero es necesario. Solo queda elegir qué. Oh! Hay una idea
Creo que muchos de ustedes están aprendiendo un idioma extranjero (tal vez para alguien este es un lenguaje de programación). Y, lo más probable, utiliza algún tipo de aplicación para estudiarlo. Las nuevas palabras en estas aplicaciones generalmente se aprenden usando tarjetas de vocabulario. Por cierto, esta técnica de aprender un idioma extranjero también funciona muy bien sin conexión. Pero ahora no se trata de eso.
Entonces, ¿por qué no desarrollamos juntos una aplicación de este tipo? Llamémoslo ... (¡redoble de tambores!)
"Cartas" . Esta será una
aplicación CRUD completa para aprender un idioma extranjero con la ayuda de tarjetas, que permitirá:
- crear, eliminar, modificar tarjetas y organizarlas mediante arrastrar y soltar;
- importar tarjetas a la aplicación desde un archivo y exportarlas a un archivo;
- seguimiento del progreso (función de autoevaluación).
La versión final de la aplicación se verá así:
Es bueno? Eso espero. Entonces vete!
A lo largo del artículo, lo guiaré a través de todas las etapas del desarrollo de la aplicación. Y a medida que lea, encontrará fragmentos marcados con etiquetas especiales.
¡Sigue al conejo blanco!
Los fragmentos marcados de esta manera contienen información importante pero adicional sobre Mavo. En la primera lectura, estos fragmentos se pueden omitir sin tener miedo de perder la idea principal.
¡La práctica es el camino hacia la excelencia!
Al final de algunas secciones, le ofreceré pequeños ejercicios independientes, después de haberlos realizado, podrá familiarizarse un poco mejor con las capacidades de Mavo y al mismo tiempo mejorar la aplicación que se está desarrollando. Dichos ejercicios encajarán en tales fragmentos.
¡Recuerda a mano!
¿Estás listo, siguiendo el hilo de mi exposición, para aplicar inmediatamente nuevos conocimientos en la práctica? Genial Después de todo, como saben, mejor recordamos lo que hacen nuestras manos . Puede desarrollar gradualmente su aplicación leyendo un artículo de principio a fin, o puede comenzar desde cualquier etapa que le interese.
Dichos fragmentos proporcionarán enlaces a las versiones correspondientes de la aplicación en Codepen .
Ahora ya está todo. ¡Empecemos!
Página web estática
Para ilustrar cómo Mavo extiende el poder del HTML, crearemos una página HTML estática, que luego utilizaremos Mavo para convertirla en una aplicación web totalmente funcional.
Supongamos que tenemos el siguiente HTML dentro de un elemento
<body> :
<header> <h1></h1> </header> <main> <article> <p> </div> <p></div> </article> </main>
En el fragmento de código anterior, el elemento
<article> corresponde a una tarjeta.
Agregaremos algunos estilos para que nuestra página se parezca más a una aplicación futura:
¿Quieres ver el código fuente por completo? Puedes hacerlo
aquí .
Conectamos Mavo
Hasta ahora solo tenemos un diseño estático. Es hora de convertirlo en una aplicación web completa. ¡Aquí es donde entra en juego Mavo!
Para usar Mavo, necesitamos conectar sus archivos JavaScript y CSS a nuestra página. Para hacer esto, agregue las siguientes dos líneas al elemento
<head> :
<head> ... <script src="https://get.mavo.io/mavo.min.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> ... </head>
¡Una pequeña digresión para los lectores de Rusia!
Puede descargar los archivos correspondientes del repositorio de Mavo y conectarlos a su página de la misma manera.
(ACTUALIZACIÓN) También puede conectar Mavo a su proyecto a través de cdnjs .
¡Sigue al conejo blanco!
¿Quizás su aplicación debería funcionar correctamente en navegadores antiguos? ¿O quieres poder ver el código fuente de Mavo y esperar que sea legible? Todo está en tus manos. Puede ajustar con qué compilación y / o versión de Mavo desea trabajar respondiendo algunas preguntas simples.
Una vez conectado Mavo, debemos especificar qué elemento de la página contendrá nuestra aplicación futura. ¡Tal elemento puede ser cualquier elemento HTML, incluso
<body> o
<html> ! Necesitamos agregar el atributo
mv-app a este elemento y especificar el
nombre de nuestra aplicación como su valor, un identificador único en toda la página HTML. Un elemento con el atributo
mv-app se denomina
elemento raíz de la aplicación.
¡Sigue al conejo blanco!
Si no asigna un valor al atributo mv-app y no hay ninguno de los atributos en el mismo elemento: id o nombre , - Mavo asignará automáticamente a la aplicación el nombre mavo1 , mavo2 , etc.
Sin embargo, le recomiendo que especifique explícitamente el nombre de la aplicación, ya que se usa (explícita e implícitamente) en otra parte de la aplicación.
¡Recuerda a mano!
https://codepen.io/dsharabin/pen/PoYxNjN
Entonces, en nuestro caso, el elemento
<main> contendrá la aplicación futura. Agregue el atributo
mv-app y especifique el nombre de nuestra aplicación -
tarjetas como su valor:
<main mv-app="flashcards"> ... </main>
Atributo de propiedad
Ahora es el momento de decirle a Mavo qué elementos de la aplicación son
importantes , es decir, se editarán y / o guardarán, y también se pueden usar en
expresiones (pero más adelante, tenga paciencia).
En nuestra aplicación, hay dos elementos de este tipo hasta ahora: estos son elementos
<p> . Agregue el atributo de
propiedad a estos elementos, informando a Mavo que estos elementos contienen datos con los que necesita trabajar. Los elementos con el atributo de
propiedad se denominan
propiedades .
¡Sigue al conejo blanco!
El atributo de propiedad se puede agregar a cualquier elemento HTML5 : Mavo sabe cómo hacerlo editable . Por ejemplo, puede editar manualmente el contenido del elemento <span> usando el teclado, y puede establecer el valor del elemento <time> (fecha u hora) usando el widget correspondiente.
El conjunto de reglas mediante las cuales Mavo hace que los elementos sean editables puede ampliarse fácilmente mediante complementos . ¿Es necesario que el usuario pueda formatear el texto usando una barra de herramientas similar a la de programas como Microsoft® Wordpad o Microsoft® Word , es decir, trabajar con texto, como en cualquier editor WYSIWYG ? ¿O desea permitir que el usuario escriba utilizando los comandos del lenguaje Markdown ? No hay restricciones Simplemente active los complementos apropiados. ¿No hay un complemento adecuado? No hay problema Escribe el tuyo. Mavo admite la funcionalidad correspondiente desde el primer momento.
Tenga en cuenta que el valor del atributo de
propiedad debe describir el propósito del elemento, como se describe generalmente por los valores de los atributos de
id o
clase .
Convierta nuestros elementos
<p> en propiedades:
... <p property="source"> </p> <p property="translation"></p> ...
¡Sigue al conejo blanco!
Si un elemento ya tiene un atributo id , clase o itemprop que describe con precisión su propósito, puede dejar el atributo de propiedad sin cambios . Por ejemplo, una de las propiedades de nuestra aplicación podría describirse de la siguiente manera: <p property class="source"> .
¿Ha notado algún cambio en nuestra aplicación después de agregarle propiedades? Estoy seguro de que si. En la parte superior de la aplicación, la barra de herramientas
Mavo (barra
Mavo ) apareció con el botón
Editar . Este botón le permite cambiar entre dos modos de aplicación:
modo de lectura y
modo de edición . Ahora nuestra aplicación está en modo de lectura. Esto significa que no podemos editar sus datos directamente en la ventana del navegador.
¡Sigue al conejo blanco!
La barra de herramientas de Mavo es totalmente personalizable (como todos los elementos de la interfaz que Mavo agrega automáticamente a la aplicación): puede cambiar su posición, apariencia, especificar un conjunto de botones disponibles o incluso asignarle su propio elemento HTML.
Un poco más adelante veremos una de las opciones para dicha personalización de la barra de herramientas de Mavo. Mientras tanto, si desea familiarizarse un poco más con las características descritas, lea la documentación en el sitio web oficial.
Bueno, es hora de cambiar al modo de edición y conocerlo. Haz clic en el botón
Editar .
¿Qué ha cambiado? El nombre del botón ha cambiado: ahora su nombre es
Edición . Esta es una señal visual para nosotros: atención, estamos en modo de edición. Intente pasar el cursor sobre cualquier párrafo con texto ("Palabra o frase" o "Traducción"). Mavo nos dice con un resaltado amarillo que puedes hacer clic en este fragmento y editarlo.
¡Atrévete! Haga clic en el texto y realice cambios en él. ¿No es genial? ¡Podemos editar el contenido de la página directamente en la ventana del navegador!
¡La práctica es el camino hacia la excelencia!
Suponga que además de la palabra (o frase) que se estudia y su traducción, queremos que la tarjeta contenga un ejemplo del uso de esta palabra (frase) en una oración. Pero sabemos que así es como se deben enseñar las palabras extranjeras, en contexto, ¿verdad?
Mejore la aplicación agregándole el elemento que falta y asígnele un nombre, por ejemplo, ejemplo .
Mv-atributo múltiple
Por el momento, solo hay una tarjeta en nuestra aplicación. Francamente, esto no es muy útil! Para una aplicación completa, carecemos de la capacidad de agregar nuevas tarjetas, eliminar las innecesarias y reorganizar las tarjetas de la manera que más nos convenga. Pero, ¿cómo podemos darnos cuenta de todo esto?
¡Recuerda a mano!
https://codepen.io/dsharabin/pen/PoYxNmN
Como desarrolladores de aplicaciones, podríamos agregarle nuevas tarjetas simplemente agregando más elementos
<article> a su código HTML. Pero entonces, ¿cómo puede el usuario agregar y quitar tarjetas por su cuenta?
Afortunadamente, en Mavo hay algo que nos permitirá agregar la funcionalidad adecuada a la aplicación una o dos veces: el atributo
mv-multiple . Usando este atributo, le decimos a Mavo qué elementos de la aplicación se pueden
propagar . El atributo
mv-multiple convierte el elemento al que se agrega en una
colección editable
de elementos (
colección ). Al mismo tiempo, Mavo agregará controles a los elementos de dicha colección, con los cuales puede agregar nuevos elementos a la colección, eliminar los existentes y organizar los elementos de la colección arrastrando y soltando. Y sí, ¡el estilo de estos controles también es totalmente personalizable!
¡Sigue al conejo blanco!
Si agrega el atributo mv-multiple a un elemento sin el atributo de propiedad , Mavo corregirá automáticamente esta situación: agregue propiedad con la colección de valores (o colección2 , colección3 para preservar la unicidad del nombre).
Sin embargo, como en el caso del nombre de la aplicación, le recomiendo que use el atributo de propiedad con colecciones: esto garantiza la seguridad de los datos de la aplicación al realizar cambios en su estructura HTML.
Bueno, agreguemos el atributo
mv-multiple al elemento
<article> de la aplicación para convertir nuestra
tarjeta de memoria solitaria en una colección de tarjetas totalmente editable (tenga en cuenta que también agregamos el atributo de
propiedad ):
<article property="flashcard" mv-multiple> ... </article>
¡Sigue al conejo blanco!
Mavo le permite especificar el nombre de la propiedad como el valor del atributo mv-multiple . Por lo tanto, podríamos describir la colección de tarjetas un poco más corta: <article mv-multiple="flashcard"> .
Tenga en cuenta que el atributo mv-multiple debe agregarse al elemento que se propaga, y no al contenedor en el que se encuentra la colección. Un error muy común es cuando los desarrolladores escriben <ul mv-multiple> lugar de <li mv-multiple> . Y al principio, ese error es difícil de detectar. Hasta que, por ejemplo, los estilos utilizados en la aplicación lo hagan obvio.
Ahora siéntase libre de cambiar al modo de edición. ¿Notó que el botón
Agregar tarjeta de memoria apareció debajo de la tarjeta? Arreglemos una prueba de manejo para ella: agregue un par de tarjetas nuevas con su ayuda. Es simplemente algo increíble: podemos agregar dinámicamente nuevas tarjetas a la aplicación, ¡incluso si no hay elementos correspondientes en su código fuente!
¡Sigue al conejo blanco!
¿Observe que agregar el atributo de propiedad al elemento <article> no hizo que su contenido sea editable? Mavo considera este elemento un grupo . Esto sucede cuando el atributo de propiedad se agrega a un elemento que contiene otras propiedades dentro de sí mismo, es decir, elementos con el atributo de propiedad .
¡Pero eso no es todo! Pase el mouse sobre cualquier tarjeta. Verá que en la esquina superior derecha de la tarjeta, Mavo agregó
tres botones nuevos (de izquierda a derecha): para eliminar la tarjeta, agregue una nueva y mueva la existente. Y al pasar el mouse sobre cualquiera de estos botones, puede adivinar fácilmente a partir de la luz de fondo generada por Mavo a qué tarjeta se refieren.
Conveniente, ¿verdad?
¡Sigue al conejo blanco!
Los botones generados por Mavo para trabajar con elementos de colección son totalmente personalizables . Por ejemplo, puede crear su propio botón para mover un elemento de colección agregando la clase mv-drag-handle al elemento HTML correspondiente.
También tenga en cuenta que puede interactuar con todos los botones para trabajar con elementos de colección usando el teclado . Por ejemplo, coloque el foco de entrada en el botón de movimiento de la tarjeta y use las teclas del cursor para cambiar la posición de la tarjeta dentro de la colección.
Atributo de almacenamiento de MV
¡Recuerda a mano!
https://codepen.io/dsharabin/pen/WNeYwpj
Ahora que la interfaz principal de la aplicación futura está desarrollada, propongo hacer lo siguiente:
- Cambie al modo de edición (si no lo ha hecho antes).
- Agregue algunas tarjetas, indicando la palabra y su traducción en cada una de ellas.
- Regrese al modo de lectura.
- Y ... actualiza la página.
¡Ay! ¿A dónde fueron todos los datos que acabamos de ingresar? ¿No se suponía que Mavo los salvaría? ¿Qué salió mal? ¿Dónde nos equivocamos?
Solo calma! De hecho, nunca le dijimos a Mavo
que debería guardar los datos editables. Además, no indicamos
dónde exactamente debería salvarlos.
Así que hagámoslo ahora. Para esto, Mavo tiene un atributo especial:
mv-storage . Solo queda descubrir qué valores puede tomar. Y resulta que Mavo nos ofrece las
más amplias posibilidades . Y
complementos , ¡abre aún más grande!
Deje que nuestra aplicación guarde datos en el almacenamiento local del navegador:
localStorage . Esta es la opción más fácil disponible en Mavo y es excelente para nuestra primera aplicación. Todo lo que necesitamos hacer es simplemente agregar el atributo
mv-storage con el valor
local al elemento raíz de la aplicación (este es el nombre del elemento con el atributo
mv-app , ¿recuerdas?):
<main mv-app="flashcards" mv-storage="local"> ... </main>
Ahora eche un vistazo a la barra de herramientas de Mavo. ¿Notó un nuevo botón
Guardar ? Además de su propósito directo, guardar cambios en la aplicación, tiene otra función útil. Intente editar los datos nuevamente. Observe que el botón
Guardar ahora está
resaltado . Desplácese sobre él con su mouse y Mavo resaltará los datos que editó pero que no guardó.
Genial, ¿eh?
Haga clic en el botón
Guardar y actualice la página (no es necesario cambiar al modo de lectura). Bueno, ¿ahora tus datos están guardados? Genial Estamos un paso más cerca de una aplicación web completa.
Atributo mv-autoguardado
Ahora nuestra aplicación funciona de modo que el usuario debe hacer clic en el botón
Guardar cuando necesite guardar los cambios realizados en la aplicación. Esto es correcto desde el punto de vista de guardar información vital, pero a menudo los usuarios se olvidan de hacerlo. Como ser ¡Ojalá nuestra aplicación pudiera guardar datos automáticamente en algunos intervalos! "Y qué, ¿se puede hacer esto realmente con la ayuda de Mavo?" - usted pregunta Y responderé con alegría y orgullo que sí, ¡es posible!
Por lo tanto, para enseñar a la aplicación a guardar automáticamente los cambios realizados por el usuario en los datos, podemos usar el
atributo mv-autosave . Debe agregarlo al elemento raíz de la aplicación. El valor de este atributo es la
cantidad de segundos que deben transcurrir desde el momento en que el usuario realiza cambios en los datos hasta que la aplicación los guarda. Haremos los cambios apropiados a nuestra aplicación:
<main mv-app="flashcard" mv-storage="local" mv-autosave="3"> ... </main>
¡Sigue al conejo blanco!
El atributo mv-autosave="3" indica a Mavo que guarde los cambios realizados en estos datos cada tres segundos. La presencia de este tipo de retraso entre los guardados se vuelve crucial si el servicio (backend) elegido para guardar los datos almacena el historial de sus cambios (por ejemplo, GitHub y Dropbox ). La ausencia de tal retraso hará que el historial de cambios sea simplemente inútil.
Para obligar a Mavo a guardar los cambios de inmediato, puede establecer el atributo mv-autosave="0" o simplemente mv-autosave . Al mismo tiempo, el botón Guardar se eliminará (como innecesario) de la barra de herramientas de Mavo.
Para ver y evaluar los cambios realizados en la aplicación, vuelva a actualizar los datos en una de las tarjetas y preste atención al botón
Guardar . ¿Te has dado cuenta? Al principio se resaltó, pero después de tres segundos se apagó, lo que indica que no había datos no guardados en la aplicación. ¡Ahora todos los cambios se guardan automáticamente!
Por lo tanto, la parte principal de nuestra aplicación ahora se ve así:
<main mv-app="flashcards" mv-storage="local" mv-autosave="3"> <article property="flashcard" mv-multiple> <p property="source"> </p> <p property="translation"></p> </article> </main>
¡La práctica es el camino hacia la excelencia!
Ya casi hemos terminado con la versión alfa de nuestra aplicación. ¡Hurra! Ahora es tu turno de hacerlo aún mejor. No te preocupes! Estás armado con todos los conocimientos necesarios para completar la tarea que te ofreceré.
Mejore la aplicación para que las tarjetas unidas por un tema común puedan agruparse. Por ejemplo, en un grupo se incluyen todas las palabras relacionadas con la ropa, en el otro - los nombres de las profesiones, en el tercero - los nombres de los alimentos, etc.
Consejos!
Hay varias formas de resolver el problema. Depende de usted decidir qué camino elegir y qué camino tomar. Pero quiero que piense en las respuestas a un par de preguntas que pueden ayudarlo a encontrar una solución.
- ¿Qué elemento HTML usará como elemento de agrupación (grupo) ? Sería conveniente para los usuarios de la aplicación si el grupo de tarjetas pudiera recibir un nombre ( nombre del tema ), y también si este grupo pudiera minimizarse si fuera necesario a su título.
- Qué atributo (s) agregará al elemento seleccionado (a menos que, por supuesto, agregue algo). ¿Será este artículo una propiedad o colección ?
- ¿Tendrán los usuarios de la aplicación la oportunidad de agregar nuevos grupos de tarjetas, eliminar los innecesarios, mover los grupos mismos y las tarjetas entre diferentes grupos?
Por cierto, puedes decidir que combinar tarjetas en grupos usando elementos separados no es tu método. Y esto es normal. Tal vez solo desee agregar etiquetas ( hashtags ) que correspondan al tema en las tarjetas. ¡Y también será una gran decisión!
Para "obtener su mano" y un poco más para familiarizarse con Mavo y sus capacidades, implemente ambas soluciones.
Atributo Mv-bar
Continuaremos ampliando la funcionalidad de nuestra aplicación. Lo configuramos para que los datos del usuario se almacenen en el almacenamiento local del navegador. Pero nuestra aplicación sigue siendo de un solo usuario: los usuarios no pueden compartir sus tarjetas con otros usuarios. ¡Y sería genial tener esa oportunidad! Y aprender un idioma extranjero en una empresa es mucho más divertido, ¿no?
¿Hay alguna forma en Mavo de permitir a los usuarios exportar sus tarjetas desde la aplicación e importar las de otra persona? Tenemos suerte! Y esta funcionalidad es compatible con Mavo, como dicen, "fuera de la caja". Por supuesto, esto no hará que nuestra aplicación sea multiusuario en el sentido canónico de la palabra, pero la presencia de dicha funcionalidad ya es mucho para una aplicación tan simple, debe estar de acuerdo.
¡Recuerda a mano!
https://codepen.io/dsharabin/pen/ZEzmWBr
Para tales tareas, Mavo tiene el atributo
mv-bar , con el que puede
especificar qué botones aparecen en la barra de herramientas de Mavo (si es que necesita alguno). Normalmente, este atributo se agrega al elemento raíz de la aplicación. Los botones tienen identificadores muy lógicos (en términos de sus nombres en inglés). Estos son solo algunos de ellos:
editar, importar, exportar .
Como solo queremos agregar botones al conjunto que ya está en la barra de herramientas de Mavo, podemos usar la llamada
sintaxis relativa . Esta sintaxis nos permite agregar y eliminar botones del conjunto predeterminado sin tener que enumerar explícitamente todos los botones que contiene. , , —
mv-bar with , ( ) :
<main mv-app="flashcards" mv-storage="local" mv-autosave="3" mv-bar="with import export"> ... </main>
— !
- : . , .
. MavoScript
, « », : « ?!» - . ? .
«» , - Mavo.
, (, , ) . , ,
property . — , .
, , , Mavo ( HTML-). . :
[] . . , - , .
!
, Mavo, MavoScript . ( Microsoft® Excel, Apple Numbers Google Sheets) , , . .
Mavo MavoScript , , , : , , , , .
, MavoScript , .
Mavo MavoScript .
!
https://codepen.io/dsharabin/pen/rNBQeMv
. ,
[source] flashcard . ,
source translation :
... <p property="source"> </p> [source] <p property="translation"></p> ...
? , ,
source . ? !
.
source . , , ?
[source] , ,
source , : , . ?!
, , , — . Por qué
[source] , , —
source . - .
[source] flashcard , ? Así:
... [source] <article property="flashcard" mv-multiple> ... </article> ...
? , . ,
source (!) . , , . ?
. ? , ,
source ? , ,
source translation . ? :
[source] [flashcard] . :
... [flashcard] <article property="flashcard" mv-multiple> ... </article> ...
, ? , — . ( (!)).
, , ( , , ), , . , Mavo .
MavoScript count() , .
!
MavoScript — . , .
— . , .
- , , , .
- .
,
count() . , :
... <span>[count(flashcard)] .</span> <article property="flashcard" mv-multiple> ... </article> ...
, , — !
— !
, Mavo … . , , - . , .
, , ( ).
!
, , . where filter() .
, , . : , ? , .
( , ) — .
!
https://codepen.io/dsharabin/pen/WNeYwxR
, :
. , ? , :
« , JavaScript?» — . Si , Mavo — ?!
, , , :
... <article property="flashcard" mv-multiple> ... <section> <h2> </h2> <button> </button> <button> </button> </section> </article> ...
mv-action
Mavo , , —
(
custom actions ).
,
mv-action .
, . , —
.
!
mv-action <form> , .
mv-action . ,
MavoScript , :
add(), set(), move() delete() .
, , , , .
: Mavo
mv-action . , . ,
mv-action="" ,
mv-action="[]" . , , , , .
, .
: .
move() . , — () . ,
,
0 .
, :
, . . . :
... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, 0)"> </button> ... </article> ...
,
mv-action flashcard . .
, . , , , ?
,
: , . , , (). , , , . ?
, . : , —
flashcard — .
flashcard . - :
... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, count(flashcard))"> </button> ... </article> ...
! .
?
. <meta>
, , ,
[count(flashcard)] ,
flashcard . ,
flashcard . , !
,
[count(flashcard)] flashcard - , . —
flashcard . Mavo , ,
(
computed properties ).
!
https://codepen.io/dsharabin/pen/NWKENNb
, , HTML-. HTML-,
<meta> :
<meta property="" content="[]"> . :
<meta> , .
!
, , , .
flashcardCount . ,
flashcard ( ):
... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple> ... </article> ...
:
, . :
... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, flashcardCount)"> </button> </article> ...
! . Felicidades
— !
— $all .
$all , , . , . $all flashcardCount . ? Por qué
, . , , ( ) . .
Conclusiones
, -. JavaScript. , , -. , « ». .
, — , , , . , , , . , HTML- Mavo, :
- ( <head> ) JavaScript- CSS- Mavo.
- mv-app .
- , ( / , / ) , property .
- mv-multiple , .
- Mavo, , mv-storage .
- , . , mv-autosave .
, : - Mavo ( Mavo ). mv-bar , , , .
- (expressions) ( ) (property) . ( ) , . Mavo , MavoScript .
- (custom actions) . mv-action .
- (computed properties) — , . , <meta> .
. ? , . . , , , (,
). , . ! . - — !
? 17 — (
« » )!
, Mavo, — , . Mavo . :
Mavo -,
.
Mavo . -, . Como? :
- Mavo, , — Mavo ;
- , , , ;
- Mavo, , , , — ;
- , Mavo Twitter , , , , «» (, Gitter Mavo);
- , Mavo — !
Mavo!.
,
(
Lea Verou ),
( ), : , - . , !
(
James Moore ). ,
« JavaScript » Udemy , ,
«» . !