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


Uppy - Plugin gratuit de téléchargement de fichiers JavaScript ES5 / ES6

L'une des entrées les plus complexes à concevoir est le téléchargement de fichiers . Il a un style HTML par défaut, mais ce n'est pas la plus belle chose au monde.

Uppy amène les téléchargements de fichiers à un tout autre niveau avec une interface personnalisée et un processus de chargement dynamique de type Ajax .

Il fonctionne sur le code ES5 / ES6, de sorte que vous pouvez créer vos applications Web avec les dernières normes JavaScript. De plus, il prend même en charge les téléchargements de fichiers à partir de sites de stockage en ligne tels que Dropbox ou Google Drive. Il s'agit donc d'un script de téléchargement de fichiers à multiples facettes pour le Web.

Uppy est complètement gratuit et open-source, avec un repo sur GitHub. Cependant, la façon la plus simple d'installer ce plugin est de passer par npm ou Yarn, donc vous pouvez l' exécuter comme un vrai paquet .

Une fois que vous avez ajouté les fichiers à votre site Web, vous n'avez qu'à inclure le fichier Uppy.js et le code CSS . Ensuite, vous ciblez le champ de saisie que vous voulez et Uppy s'occupe du reste.

Il a une interface unique qui ressemble à un grand emplacement carré pour faire glisser et déposer des fichiers. Vous pouvez également sélectionner des éléments de votre disque dur ou même télécharger des fichiers à distance à partir d'URL externes . Assez fou!

Vous pouvez trouver l'ensemble du processus d'installation sur la page de documentation, mais cela nécessite au moins une certaine compréhension d'ECMAScript 6 . Cette bibliothèque regarde vers l'avenir du script et n'est pas la chose la plus facile à utiliser avec JavaScript pur vanilla.

Mais, si vous êtes sérieux au sujet du développement Web, cela vaut la peine d'apprendre ES6 de toute façon. Vous pouvez trouver des tonnes de ressources en ligne pour l'auto-apprentissage et vous pouvez même utiliser Uppy comme votre premier "vrai" projet pour plonger et commencer à apprendre.

Consultez l'exemple de tableau de bord pour voir Uppy en action . Pour cette page, le téléchargement est caché derrière un bouton de déclenchement, où vous cliquez sur le bouton pour afficher un champ de téléchargement modal.

De là, vous pouvez choisir si vous voulez télécharger une image depuis votre ordinateur, depuis le web ou même depuis votre webcam !

La page des exemples offre un tas à regarder, y compris un exemple de glisser-déposer, avec une page de démonstration internationalisée .

Mais, pour vraiment apprendre comment cela fonctionne, je recommande d'écrémer les docs et de naviguer dans le repo GitHub principal. Vous pouvez également partager vos pensées avec les créateurs sur Twitter @transloadit.

Photos de profil dynamique pour les maquettes d'interface avec une interface utilisateur diversifiée

Photos de profil dynamique pour les maquettes d'interface avec une interface utilisateur diversifiée

Lorsque vous concevez une maquette, vous voulez d'abord vous concentrer sur l'interface et moins sur l'esthétique. La même chose vaut pour le wireframing et le codage d'une mise en page Web à partir de zéro .De nombreuses maquettes différentes nécessitent des photos de profil, telles que les réseaux sociaux, les commentaires de blog et les pages de profil. Avec

(Conseils techniques et de conception)

Le cadre d'hélice associe Bootstrap et Google Material Design

Le cadre d'hélice associe Bootstrap et Google Material Design

L'immense popularité de la conception matérielle de Google ne devrait pas surprendre. Il fait partie d'un style d'interface utilisateur moderne se concentrant davantage sur le design plat avec un accent sur les modèles UX et d'utilisabilité .En prenant les concepts de conception matérielle et en les ajoutant à Bootstrap, nous obtenons le framework Propeller .Ce fr

(Conseils techniques et de conception)