Recursos frescos para diseñadores y desarrolladores web (octubre de 2017)

Este mes, Fresh Resouces será un poco diferente a los meses anteriores. Nosotros, los desarrolladores web, nos estamos ganando la vida en una industria que está cambiando rápidamente, y he visto muchos anuncios de algunas de las compañías de tecnología más grandes, como Google, Microsoft, Firefox y PHP, que cambiarán la forma en que construimos La web.

En esta entrega, la mitad de nuestra lista será sobre estos anuncios. Así que prepárate para saludar al futuro.!

Optimización esencial de la imagen

Se trata de un Artículo exhaustivo para optimizar una imagen para la web. escrito por Addy Osmani. No es como otros escritos que giran en torno a cómo hacerlo, o qué hacer y qué no hacer solamente..

Este artículo realmente lo guía a través de los detalles técnicos, así como la ciencia detrás de la optimización. También encontrará información detallada sobre varios enfoques de optimización y formatos de imagen., Herramientas, consejos y algunos ejemplos del mundo real..

PHP 7.2

Un comprensivo Referencia sobre lo que viene a PHP 7.2.. Aparte de las adiciones que mejoran el rendimiento de las aplicaciones PHP, PHP 7.2 también viene con Depreciación en la que se van a eliminar varias cosas. y ya no se debe utilizar.

En PHP 7.2, hay dos funciones que van a ser obsoletas a saber: create_function () y __autoload (). Si eres un desarrollador web, Revisa tu código y haz los cambios necesarios.. He visto numerosos complementos de WordPress que todavía están usando estas dos funciones.

Web Share API

Sinceramente, no vi esta API llegando a la web. Sin embargo, como la mitad de nuestra interacción en la web se trata de “compartir”, esta API hará mucho las cosas Más fácil para los desarrolladores web para construir una experiencia de intercambio nativa, particularmente en la plataforma móvil.

Esta API actualmente solo está disponible en Google Chrome para escritorio y Android. Echa un vistazo a este video de Youtube para verlo en acción..

Atributo asíncrono de la imagen

Otra cosa que revolucionará la web es la asíncrono atributo para el elemento img. En el momento de escribir este artículo, hay varios enfoques para carga la imagen de forma asíncrona que implica un pequeño truco de JavaScript. Pronto podremos simplemente añadir async = on sobre la img elemento.

Firefox Quantum

Mozilla ha estado enviando agresivamente las actualizaciones a Firefox con algunas mejoras, con nombre de código “Proyecto Quantum”. Incluye Quantum CSS - un nuevo motor para Representación de CSS extremadamente rápida, una nueva interfaz de usuario y nuevos DevTools.

El lanzamiento es ganando tracción en desarrolladores web y algunos ya han cambiado su navegador principal a Firefox. Hay más por venir en este proyecto, incluyendo Quantum DOM y WebRender. ¿Vamos a ver a Node.js contender basado en el motor de Firefox Quantum? Bueno tal vez si.

MS Edge para iOS y Android

Microsoft acaba de anunciar a lanza su último navegador, Edge, para iOS y Android. Esto significa que hay un navegador más para probar sus sitios web.

Gutenberg

WordPress se encuentra actualmente en un proyecto ambicioso, cuyo nombre en código es Gutenberg. Gutenberg es un Cambio de cara al editor de WordPress construido casi completamente con JavaScript.

En este punto, Gutenberg es construido con React pero el proyecto está considerando otro marco como Preact, Vue o algo más. Es una situación complicada por ahora. Entonces, para los desarrolladores de WordPress que crean temas y complementos, mantén tus ojos en el proyecto como Cambiará la forma en que construimos WordPress para siempre.

FoitFout

FoitFout es una herramienta útil para comparar dos enfoques diferentes llamados FOIT y FOUT para cargar fuentes personalizadas en la web. Con esta herramienta, puede emular los dos enfoques y decidir cuál es el mejor ajuste para su sitio.

Vuera

Vuera es una Biblioteca de JavaScript que te permite usar Vue y Reaccionar juntos. Puede incluir un componente Vue desde un .vue o use un componente React en Vue. Tu equipo ahora puede ser Más productivo con cualquier marco. que prefieren usar.

Arrastrable

“Arrastrable” Es una biblioteca fantástica de Shopify. Está construido sobre el navegador nativo Arrastra y suelta la API y te permite una API extensa para trabajar con. En caso de que no proporcione algo que usted necesita, puede escribir un Módulo personalizado para ampliar sus funcionalidades.. Echa un vistazo a la demostración para ver cómo funciona.

Diagrama de flujoJS

Como su nombre lo indica, FlowchartJS es un Biblioteca que permite construir un diagrama de flujo como en PowerPoint.. Del mismo modo, puede crear varias formas de gráfico incluyendo círculo, elipse, cuadrado, diamante, triángulo, etc..

QuickBill

Un peso ligero y Aplicación web sencilla para crear una factura.. Utiliza tecnologías de navegador y API nativas para ejecutarse, por lo que no se necesita una cuenta. Simplemente vaya al sitio web, agregue los artículos a la factura y genere el archivo PDF. Eso es!

Mocka

Mocka es una Marcador de posición de contenido que puede utilizar para el sitio web de creación de prototipos.. Solo tiene 500 bytes y es totalmente personalizable. Puede incluirlo fácilmente en el archivo CSS de su proyecto usando el mixin de Sass.

los CSS proporciona una serie de clases incluso mocka-media para crear un marcador de posición de imagen, encabezado de mocka para crear un Título, y texto mocka para crear un texto arbitrario.

VueStar

VueStar es un Componente de Vue para agregar un efecto brillante al hacer clic en un icono, similar a lo que Twitter hace con el “corazón” Icono en su aplicación móvil. El componente introduce un nuevo elemento llamado vue-star Donde puedes agregarlo en la era web. Y tu estas listo!

Grid Playground

CSS Grid presenta un nuevo concepto en la web para crear un diseño y, a primera vista, es algo complejo, dadas las numerosas propiedades nuevas que posee..

GridPlayground es básicamente un Iniciativa Mozilla para enseñar CSS Grid e impulsar la adopción de CSS Grid. Incluso Firefox trae una nueva herramienta a DevTools para inspeccionar el diseño de Grid.

Administrador de fragmentos

“Administrador de fragmentos” es un simple Aplicación para almacenar y administrar fragmentos de código. Puede crear un nuevo elemento, pegar el código y establecer el punto. En este punto, no es nada sofisticado y solo proporciona el código fuente que necesitará compilar usando NPM.

Interfaz con pestañas

Un gran Recorrido por la construcción de la navegación de pestañas progresiva y accesible con un uso mínimo de JavaScript. Un gran recurso para aquellos que quieren aprender más sobre el diseño accesible.

SwissInCSS

SwissInCSS exhibe varios de los diseños clásicos de carteles suizos que usan solo CSS. El código fuente está disponible en CodePen.