post oxygen builder
img-5

Recoda

Listado Plugins

Traducción  con la versión gratuita del traductor www.DeepL.com/Translator de la página oficial de Facebook por lo que tendréis que buscar el sentido correcto a lo que el autor quiere decir.

Hola a todos quiero explicar lo que es Recoda.
Lo primero es implementar un montón de temas de Github, principalmente por Aformal que es un tipo brillante e hizo un montón de esfuerzos en la sugerencia de mejoras de UI / UX, algunos de ellos eran complejos, y algunos de ellos eran fáciles.
El objetivo de Recoda es la comunidad en todos los sentidos, sin importar la opción que tomemos, es decir, el objetivo principal es tener una comunidad fuerte orientada a las personas que utilizan esta herramienta 8-10 horas al día porque quieren una UX intuitiva y rápida, y entonces las pequeñas cosas tienen un gran impacto. Por qué no lo veo como una herramienta de hobby, para sacar el máximo provecho de recoda necesitas usarlo todos los días. Y algunas características están orientadas hacia el flujo de trabajo avanzado
Vamos a cavar bajo el capó. Las cosas pueden ser más y menos performantes. El CSS de Recoda es de unos 30kb creo en este momento. ¿Es eso hinchazón? En cierto contexto es porque estamos sobrescribiendo CSS existentes, en mi opinión que son mejor gastados 30kb costos. (cargas sólo con el oxígeno, no en el frente)
Permítanme explicar por qué es mi bloat favor:
1) los colores se definen con 10 variables de color, para un nuevo tema se puede utilizar 5-10 variables y crear todo un nuevo tema
2) los paneles están definidos con variables y calc: esto es enorme para mi, cuando escribo JS no me preocupo por el diseño, sólo cambio una variable y mantengo mi lógica muy simple, con css le digo al navegador cómo debe verse y comportarse
3) Guía de rejilla CSS - hecha con una propiedad css y algunas variables y calc, es un truco muy simple pero es modular como el infierno y podría ser actualizado con algunas características interesantes (hay un poco de jQuery para activar/desactivar la clase de guía de rejilla en el documento)
4) ¿se puede reducir este CSS? sí, mediante una orientación más general, pero existe el peligro de orientar lo que no se puede ver y tal vez no quiera. En la reescritura voy a empezar con algunos objetivos locos bajos para ver lo que tiro con eso y voy a tratar de reducir al mínimo.
¿Qué cosas evitó Recoda? Jugar con la BD, no sé demasiado sobre las funciones de manejo seguro de Wordpress para la BD (he jugado dos veces en mi vida con la BD y sólo he implementado algunas protecciones de inyección SQL realmente básicas para casos triviales como 1==1) y estoy buscando sólo guardar algo de información en el wp-content/uploads local en el navegador y hacer comandos de importación, exportación y borrado para manejar estas pequeñas cosas como las preferencias del usuario de la aplicación.

Traducción realizada con la versión gratuita del traductor www.DeepL.com/Translator

Hello everyone I want explain what is Recoda about.
First thing implement lot of Github issues, mainly by aformal who is brilliant guy and he did damn lot of efforts in suggestion about UI/UX improvements, some of them were complex, and some of them were easy-peasy.
Recoda goal is community in every way no mather which option we go that is main goal to have strong community oriented towards people which are using this tool 8-10hr/day because that want intuitive and quick UX, and then small things are making big impact. Why i don't see it as hobby tool, to take full advantage of recoda you need use it everyday. And some features are oriented toward advanced worflow
Let's dig under the hood. Things can be more and less performant. Recoda CSS is about 30kb i think at this point . Is that bloat? In some context it is because we are overwriting existing CSS, in my opinon that are best spent 30kb costs. (loads only with oxygen, not on fronted)
Let me explain why it is my fav bloat:
1) colors are defined with 10 color variables, for new theme you can use 5-10 variables and create whole new theme
2) panels are defined with variables and calc: this is huge to my side, when i write JS i don't worry about layout, i just change one variable and keep my logic dead simple, with css i told browser how it should like to look and behave
3) CSS grid guide - done with one css property and few variables and calc, it is dead simple trick but is modular as hell and could be upgraded with some neat features (there is little jQuery to toggle ON/OFF grid guide class in document)
4) can this CSS be reduced? yes by more general targeting, but there is danger to target what you can't see and maybe don't want . In rewrite I will start with some crazy targeting low targets to se what I shoot with that and I will try to reduce it to bare minimum.
What things Recoda avoided? Messing with DB, I don't know too much about Wordpress safe handling functions for DB (I have played two times in my life with DB and just implemented some really basic SQL injection protection for trivial cases like 1==1) and I'm looking just save some info to Local wp-content/uploads in your browser and make import, export, and clear commands to handle these small things like app-user-preferences.

Unas imágenes explicativas

En el panel de la izquierda tenemos una vista algo diferente pero muy familiar. La barra se divide en dos partes, en la del exterior tenemos un icono para cada grupo de las opciones que se disponen para el elemento seleccionado en el editor, así mismo, por debajo del punto verde hay otros iconos que corresponden a los diferentes grupos de elementos que se pueden añadir a la página. Todo de una manera muy práctica visualmente y que ayuda a una rápida localización .

Además, el ancho de la barra lateral es ajusta en su ancho, para lo cual tenemos un tirador para ajustar ese ancho a nuestros gustos y necesidades, toda una golosina.

En la barra inferior dispone de una serie de nuevas herramientas, estas ya mas destinadas a desarrolladores o gente con un cierto nivel para añadir desde la barra de comandos clases, tag... etc, e incluso elementos como divs mediante la sintaxis de Emmet , por ejemplo dispones de un botón en forma de icono con el que se abre una nueva ventana del navegador con la página cargada, una característica que hace recordar al Live Server de Visual Code Studio. 
En el extremo inferior derecho hay un botoncito de color verde que sirve para mostrar y ocultar esta barra.

Otra característica, y esta es de las que mas nos gusta, es la posibilidad de cambiar los colores del editor, tanto del fondo como como de los mismos botones de opciones. 
El selector para esta acción se encuentra en la parte inferior derecha. 
Abajo ponemos unas imágenes de las varias opciones, eso si, el estilo "Vodka" no es para cualquiera ... ????
El panel derecho poco difiere del nativo, con la salvedad de los iconos y que el selector de salida añade más opciones, estas son  Templates, Posts, Pages y Media, además de la opción de salida Admin y Frontend habituales.
Al igual que el panel izquiedo, el derecho también es ajustable en su ancho y también dispone de su correspondiente tirador.
Unas imágenes de los diferentes colores.
colores-recoda
Los atajos de teclado, una vez dominados, facilitan muchísimo el trabajo además de mejorar la velocidad de producción.
Recoda Teclado

Y bien, como habíamos dicho este plugin es gratuito y se puede descargar del repositorio Github del desarrollador que está en este enlace y descargando el zip se instala de la misma manera que otro plugin cualquiera.
Aunque es totalmente gratuito desde oxygenados.com os pedimos que se apoyéis al desarrollador, para ello se puede hacer una contribución en Patreon con colaboraciones que van de 3€, 4'5 o 9€ mensuales que podéis dar por finalizada cuando querías.

Para mas información:

0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios
img-16
Code Snippets

Es el que mas tiempo lleva en funcionamiento y también es el mas barato al ser totalmente gratuito.

Leer más
img-17
BackupSheep - Copias de Seguridad

BackupSheep es un servicio de copia de seguridad basado en la nube que permite a los usuarios hacer copias de seguridad de sus datos en la nube. El servicio es fácil de usar y proporciona a los usuarios la tranquilidad de saber que sus datos están seguros y protegidos.

Leer más
img-18
Oxyprops - En el editor de Oxygen

En esta entrada seguimos hablando y mostrando las cualidades del plugin que tanto nos ha gustado y que tantas horas de trabajo puede quitar a los diseñadores web una vez que se le controle el funcionamiento del mismo, aunque mas bien esa curva de aprendizaje hasta puede parecer ridícula.

Leer más