Nouvelles ressources pour les concepteurs et les développeurs Web (octobre 2017)

Ce mois-ci, Fresh Resouces sera un peu différent des mois précédents. En tant que développeurs Web, nous gagnons notre vie dans un secteur en évolution rapide et j'ai assisté à de nombreuses annonces émanant des plus grandes entreprises de haute technologie telles que Google, Microsoft, Firefox et PHP, qui vont changer notre façon de construire. la toile.

Dans cet article, la moitié de notre liste sera consacrée à ces annonces. Alors, soyez prêt à dire bonjour à l'avenir!

Optimisation d'image essentielle

C'est un article exhaustif pour optimiser une image pour le web écrit par Addy Osmani. Ce n'est pas comme les autres articles qui traitent de comment faire, ou de choses à faire et à ne pas faire.

Cet article vous explique en détail les détails techniques ainsi que les la science derrière l'optimisation. Vous trouverez également des informations détaillées sur plusieurs approches d'optimisation et formats d'image., des outils, des astuces et des exemples concrets.

PHP 7.2

Une complète référence sur ce qui arrive à PHP 7.2. Outre les ajouts qui améliorent les performances des applications PHP, PHP 7.2 est également livré avec amortissement dans lequel plusieurs choses vont être supprimées et ne devrait plus être utilisé.

En PHP 7.2, deux fonctions vont être déconseillées, à savoir: create_function () et __autoload (). Si vous êtes un développeur web, révisez votre code et apportez les modifications nécessaires. J'ai vu de nombreux plugins WordPress qui utilisent encore ces deux fonctions.

API de partage Web

Honnêtement, je n'ai pas vu cette API arriver sur le Web. Cependant, comme la moitié de notre interaction sur le Web concerne “partage”, cette API va grandement faire des choses plus facile pour les développeurs Web de créer une expérience de partage native, en particulier sur la plateforme mobile.

Cette API est actuellement disponible uniquement dans Google Chrome pour Desktop et Android. Regardez cette vidéo sur Youtube pour la voir en action.

Attribut Async de l'image

Une autre chose qui révolutionnera le Web est le async attribut pour l'élément img. Au moment d’écrire, il existe une poignée d’approches pour charger l'image de manière asynchrone qui implique une petite astuce de JavaScript. Bientôt nous pourrons simplement ajouter async = on sur la img élément.

Firefox Quantum

Mozilla a poussé de manière agressive les mises à jour vers Firefox avec quelques améliorations, nom de code “Projet Quantum”. Il comprend Quantum CSS - un nouveau moteur pour rendu CSS extrêmement rapide, une nouvelle interface utilisateur et de nouveaux outils DevTools.

La libération est gagner du terrain chez les développeurs web et certains ont déjà basculé leur navigateur principal vers Firefox. Ce projet comprendra d’autres projets à venir, notamment Quantum DOM et WebRender. Allons-nous voir le candidat Node.js basé sur le moteur Firefox Quantum? Eh bien, peut-être que oui.

MS Edge pour iOS et Android

Microsoft vient d'annoncer à lance son dernier navigateur, Edge, pour iOS et Android. Cela signifie qu'il existe un autre navigateur sur lequel tester vos sites Web..

Gutenberg

WordPress est actuellement sur un projet ambitieux, le code nommé Gutenberg. Gutenberg est un ravalement de l'éditeur WordPress construit presque entièrement avec JavaScript.

À ce stade, Gutenberg est construit avec React mais le projet envisage un autre cadre tel que Preact, Vue ou autre chose. C'est une situation compliquée pour le moment. Alors, pour les développeurs WordPress construisant des thèmes et des plugins, gardez vos yeux sur le projet cela va changer notre façon de construire WordPress pour toujours.

FoitFout

FoitFout est un outil pratique pour comparer deux approches différentes appelées FOIT et FOUT à charger des polices personnalisées sur le Web. Avec cet outil, vous pouvez émuler les deux approches et décider quelle approche convient le mieux à votre site..

Vuera

Vuera est un Bibliothèque JavaScript qui vous permet d'utiliser Vue et React ensemble. Vous pouvez inclure un composant Vue à partir d’un .vue ou utilisez un composant React dans Vue. Votre équipe peut maintenant être plus productif avec n'importe quel cadre qu'ils préfèrent utiliser.

Glissable

“Glissable” est une bibliothèque fantastique de Shopify. Il est construit sur le navigateur natif Drag-n-Drop API et vous permet de travailler avec une API étendue. Au cas où il ne fournirait pas ce dont vous avez besoin, vous pouvez écrire un module personnalisé pour étendre ses fonctionnalités. Regardez la démo pour voir comment ça marche.

OrganigrammeJS

Comme son nom l’indique, FlowchartJS est un bibliothèque qui permet de construire un organigramme comme dans PowerPoint. De même, vous pouvez créer diverses formes de graphique, notamment des cercles, des ellipses, des carrés, des losanges, des triangles, etc..

QuickBill

Un poids léger et application web simple pour créer une facture. Il utilise les technologies de navigateur et les API natives pour s'exécuter, de sorte qu'aucun compte n'est nécessaire. Il suffit d’aller sur le site Web, d’ajouter les éléments à la facture et de générer le fichier PDF. C'est tout!

Mocka

Mocka est un espace réservé au contenu que vous pouvez utiliser pour le prototypage de sites Web. C'est seulement 500 octets et entièrement personnalisable. Vous pouvez facilement l'inclure dans le fichier CSS de votre projet en utilisant le mixin Sass.

le CSS fournit un certain nombre de classes comprenant mocka-media créer un espace réservé pour l'image, mocka-cap pour créer un titre, et mocka-text créer un texte arbitraire.

VueStar

VueStar est un Composant Vue pour ajouter un effet scintillant lorsque vous cliquez sur une icône, semblable à ce que Twitter fait avec le “cœur” icône dans leur application mobile. Le composant introduit un nouvel élément nommé vue-star où vous pouvez l'ajouter à l'ère du Web. Et tu as fini!

Aire de jeu de grille

CSS Grid introduit un nouveau concept sur le Web pour construire une mise en page et c'est un peu complexe à première vue, compte tenu des nombreuses nouvelles propriétés dont il dispose.

GridPlayground est fondamentalement un Initiative de Mozilla pour enseigner le CSS Grid et faire avancer l'adoption du CSS Grid. Même Firefox apporte un nouvel outil à DevTools pour inspecter la disposition de la grille.

Gestionnaire d'extraits

“Gestionnaire d'extraits” est un simple application pour stocker et gérer des extraits de code. Vous pouvez créer un nouvel élément, coller le code et définir le point. Pour l'instant, rien d'extraordinaire et il ne fournit que le code source que vous aurez besoin de compiler à l'aide de NPM.

Interface à onglets

Un grand visite guidée de la navigation par onglets progressive et accessible avec une utilisation minimale de JavaScript. Une excellente ressource pour ceux qui veulent en savoir plus sur le design accessible.

SwissInCSS

SwissInCSS présente plusieurs affiches classiques suisses utilisant uniquement le CSS. Le code source est disponible dans CodePen.