hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Rendre tout le contenu incorporé réactif avec Reframe.js

La partie la plus délicate à propos de l' intégration de vidéos est d'obtenir la largeur et la hauteur correctes. Ces chiffres définissent le rapport d'aspect et quand ils sont éteints, vous obtiendrez un lecteur vidéo bancal .

Cela est vrai pour tous les éléments incorporés tels que les iframes et les widgets de médias sociaux. Et ces choses peuvent être encore plus délicates avec la conception réactive, car elles ne sont généralement pas des éléments réactifs .

Mais avec Reframe.js, vous pouvez rendre n'importe quel élément sensible pour n'importe quel rapport d'aspect .

C'est peut-être l'un des plugins JS les plus simples et les plus précieux du web. Il a été créé par Dollar Shave Club qui a sa propre page GitHub.

Reframe est l' un de leurs plugins gratuits conçus pour les développeurs qui veulent un moyen plus simple de gérer le contenu intégré responsive .

Le coupable évident est la vidéo intégrée de sites tels que YouTube et Vimeo. Il est notoirement difficile de rendre ces éléments réactifs sans les hacks CSS.

Avec Reframe.js, il vous suffit de sélectionner l' élément que vous souhaitez cibler et de le recadrer à l'aide de la fonction reframe() .

Commencez par ajouter le plugin Reframe.js à votre page Web. Vous pouvez télécharger une copie à partir de GitHub, et seulement 1KB est minifié.

Ensuite, vous passez simplement la fonction un sélecteur pour les éléments que vous souhaitez recadrer. Chargez la page et boom! Vous devriez être tous ensemble.

Par exemple, supposons que vous ayez quelques vidéos intégrées sur votre site. Vous pouvez ajouter la classe .video à l' .video et l'utiliser comme sélecteur. Reframe ajoute automatiquement un div et une classe autour de lui pour créer le style réactif.

Donc, votre code JavaScript ressemblerait à ceci:

 recadrer («vidéo»); 

Assez simple non?

Ce code cible tous les éléments avec la classe .video et les rend .video . Pas de hacks supplémentaires, pas de CSS supplémentaire. Certes, il n'y a rien de mal à utiliser la méthode CSS, mais vous devrez envelopper manuellement toutes les vidéos intégrées avec la classe supplémentaire.

Reframe vous sauve juste cette étape supplémentaire et apporte tout cela avec JavaScript. Pour consulter une démo et trouver des extraits de code de base, visitez la page d'accueil de Reframe.js. Vous pouvez télécharger une copie du code directement depuis le dépôt GitHub.

Générer des extraits de code WordPress "Magiquement" avec WP Hasty

Générer des extraits de code WordPress "Magiquement" avec WP Hasty

Traiter des extraits de code WP peut être une vraie douleur. Des taxonomies personnalisées aux boucles WP_Query, les développeurs copient et collent toujours des extraits entre les projets .Avec l' application Web WP Hasty, vous pouvez gagner du temps et de la frustration en générant automatiquement des extraits en cliquant sur un bouton. Cet

(Conseils techniques et de conception)

5 actes Internet qui restaureront votre foi dans l'humanité

5 actes Internet qui restaureront votre foi dans l'humanité

Fatigué des mauvaises vibrations que vous avez eu toute l'année? Si vous avez l'impression que votre vie paisible est déracinée par des nouvelles décourageantes, faites une pause. Restaurer la foi avec des histoires de bien-être, et trouver du réconfort en sachant qu'il y a beaucoup de bien là-bas, car au fond, nous aimons tous aller au paradis, même si certains d'entre nous n'y croient pas.Heureuse

(Conseils techniques et de conception)