Skip to content

Instantly share code, notes, and snippets.

View aliastim's full-sized avatar
👻
■■■ ■■ ■■ ■ Work in progress

Timothée CORRADO aliastim

👻
■■■ ■■ ■■ ■ Work in progress
View GitHub Profile

VueJS Avancé (avec VirtualDom)

EN COURS D'ECRITURE

Séparer la partie template de la partie css/js

VueCli va initialiser un projet avec VueJS ainsi que tous les templates de base qui vont nous servir dans un projet

Prérequis

installer Vue Cli de manière globale sur son mac :

Découvrir Vue JS

Vue, c'est quoi ?

A l'instar de ReactJS, Vue est un framework front-end javascript utilisant des modules, celui-ci a pour objectif de fluidifier une page web en la rendant dynamique (ainsi seuls les éléments qui vont changer sur la page (comme un formulaire par exemple) seront rechargés plutôt que la page entière.

Les avantage de Vue :

  • Facile à prendre en main et intuitif
  • Léger
  • Inclu tout le nécessaire pour fonctionner directement
  • Grande communauté

Découvrir React JS

EN COURS D'ECRITURE

React, c'est quoi ?

ReactJS est une librairie front-office javascript pour créer des interfaces utilisateurs. Il permet de séparer l'état (les données) et le fonctionnement des vues. La librairie offre également la possibilité de créer des composants dynamiques, ce qui va offrir une grande fluidité.

Un composant, c'est :

Prendre en main inDesign 👨🏻‍🎨

Nous allons voir ici les bases d'InDesign pour pouvoir prendre le logicel en main rapidement.
Mais d'abord, InDesign, c'est quoi ?
InDesign est l'outil de mise en page de la gamme Adobe. C'est l'allié parfait pour faire tous types de documents tels que des rapports, des brochures, des catalogues, des chartes, des livres, etc.

La mise en place d'un document se déroule en deux phases : la phase de création (Quel contenu vais-je intégrer dans mon document ? Quels images ? Quelle typographie, etc) et la phase d'exécution (La mise en page du document).

Avant de commencer

La première question à se poser avant de démarrer, c'est Quel type de document vais-je créer ? (Quel format vais-je utiliser, quel support, quel papier, etc).
Cette question est importante puisqu'elle va définir les critères de votre document et notamment le nombre de colonnes.

Générer un fichier PDF en php avec html2pdf 🧾

html2pdf est une librairie simple d'utilisation et gratuite très utile pour générer des fichiers pdf. La librairie permet entre autre de transformer du html en pdf. Nous allons ici, voir comment l'utiliser.

Installation

Nous allons ici installer html2pdf avec Composer à l'aide de la commande :

composer require spipu/html2pdf

Générer le document

💳 Mettre en place un formulaire de paiement php sur son site avec Stripe

Stripe est une API très utile pour intégrer un formulaire de paiement à son site web. Celle-ci va vous permettre de mettre en place des paiements directs ou des abonnements sans avoir besoin d'enregistrer les données sensibles sur votre site puisque toutes les informations seront directement traitées par le serveur de Stripe.

⚠️ En revanche, le service de Stripe vous coûtera 2,9 % + 0,30 $US pour chaque transaction.

Avant de commencer

  • Créer un compte sur le site de stripe
  • Ajouter ses coordonnées bancaires pour accéder aux fonctionnalités

Vous trouverez sur l'interface, vos clés publiques (publishable key) et secrètes (secret key), assurez-vous d'avoir activé l'environnement de tests (sandbox) pour la mise en place du formulaire

Créer une animation avec un Sprite

Un sprite est une alternative simple et rapide pour intégrer une animation sur votre site web.

Comment ça fonctionne ?

Un sprite se présente sous la forme d'une image PNG (Vericale ou horizontale) qui contient l'ensemble des frames de votre animation (Voir exemple ci-dessous).

Comment créer l'animation dans le code ?

Dans le code, l'animation est très basique. Dans le html, il suffit de créer une div avec une class qui correspondra à celle de votre image. Et dans le CSS, vous allez appeler votre sprite et définir la taille (égale à une frame) et le nombre de frames. Dans l'animation, vous allez préciser la taille totale de votre sprite.

Installer et déployer un site sur son propre serveur

Besoins

Besoins matériels

  • Carte Raspberry pi
  • Carte SD (au minimum 16Go)
  • Optionnel : Support de stockage pour le site web (Disque dur externe (SSD de préférence) ou clé USB)

Installations logiciels

  • OS : Raspberry Pi OS with desktop
  • Serveur Web : Nginx

Index des types de formats de fichiers en base de données

Catégorie Format Type

Fidélisez vos utilisateurs avec le design thinking

EN COURS D'ECRITURE