Le dark mode est partout : dans les systèmes d'exploitations, le navigateur.
Il manque plus qu'il soit ajouté à votre site.
C'est exactement ce que nous allons faire en partant de zéro.
On utilisera :
- HTML
- CSS (media queries, variables CSS, flexbox)
- JavaScript (localStorage)
Pour créer une page web responsive avec le dark mode et la possibilité de se rappeler de la préférence de l'utilisateur.
Partie 1 (30min) :
Pour créer votre plusieurs pages et des transitions de pages, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit tout en souscrivant à la newsletter.
]]>Code source sur Github
Partie 1 (30min) :
]]>
Framer motion vient de sortir sa version 5, et pour fêter ça, nous allons créer une interface de site e-commerce et animer la page catalogue produit et la fiche produit.
Lors de de live, nous apprendrons :
- les animations déclaratives,
- les transitions de page
- la gestion des routes en React
Partie 1 (19min) :
Pour créer votre plusieurs pages et des transitions de pages, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit tout en souscrivant à la newsletter.
]]>Partie 1 (16min) :
]]>Envoyer des données textes à un serveur est relativement simple, mais envoyer des fichiers binaires (images, PDF, .zip, etc...) l'est un peu moins.
Et grâce à ce live, vous connaitrez (presque) tous les secrets pour gérer un upload de fichier de manière sécurisé !
A la fin du live, on mettra notre serveur en ligne et vous pourrez le tester par vous même.
On va apprendre à utiliser :
- Uploader des fichiers binaires
- Créer un serveur d'application
Partie 1 (28 min)
Pour créer votre propre texte et importer des modèles 3D, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit tout en souscrivant à la newsletter.
]]>Envoyer des données textes à un serveur est relativement simple, mais envoyer des fichiers binaires (images, PDF, .zip, etc...) l'est un peu moins.
Et grâce à ce live, vous connaitrez (presque) tous les secrets pour gérer un upload de fichier de manière sécurisé !
A la fin du live, on mettra notre serveur en ligne et vous pourrez le tester par vous même.
On va apprendre à utiliser :
- Uploader des fichiers binaires
- Créer un serveur d'application
Partie 2 (56min) :
Le code source sur Github.
Partie 1 (28min) :
]]>
Vous ne savez pas comment passer votre temps dans le bus ou le métro ?
Alors pourquoi ne pas jouer à Fruit Ninja ? Encore mieux, jouer à votre version de Fruit Ninja !
C'est ce que nous allons faire dans ce live, et ce en moins de 2h !
On va coder le jeu Fruit Ninja de zéro avec :
- un peu d'HTML,
- et beaucoup de JavaScript.
On va apprendre à utiliser :
- les événements de souris
- la détection d'objet
Partie 1 (44min) :
Voici le lien vers la partie 2 pour envoyer une salve de fruits et les couper en morceaux.
]]>Vous ne savez pas comment passer votre temps dans le bus ou le métro ?
Alors pourquoi ne pas jouer à Fruit Ninja ? Encore mieux, jouer à votre version de Fruit Ninja !
C'est ce que nous allons faire dans ce live, et ce en moins de 2h !
On va coder le jeu Fruit Ninja de zéro avec :
- un peu d'HTML,
- un peu de CSS et,
- et beaucoup de JavaScript.
On va apprendre à utiliser :
- les événements de souris
- la détection d'objet
Partie 2 (50min) :
Code source sur Github
Partie 1 (44min) :
]]>
Voici la vidéo de la partie 1 (16min) :
Pour créer votre formulaire et faire transiter les données à travers différentes pages, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit.
]]>Voici la vidéo de la partie 2 (21min) :
Le code source sur Github
Voici la vidéo de la partie 1 (16min) :
Partie 2 (1h49min) :
Et le code source sur Github
Partie 1 (26min) :
]]>Vous souhaitez créer un effet "wow" sur votre portfolio en ajoutant du texte 3D ?
Vous avez frappé à la bonne porte, car on va apprendre pendant ce live coding à créer un texte 3D animé dans votre portfolio.
C'est exactement ce que nous allons faire, et ce en moins de 2h !
On va coder une animation 3D sur du texte, pour cela, on va utiliser :
- le framework ThreeJS
- et JavaScript
On va apprendre :
- les bases de la 3D en JS
Partie 1 (22min) :
Pour créer votre propre texte et importer des modèles 3D, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit.
]]>
Et on va apprendre les concepts des :
Vidéo complète :
Et le code source sur Github.
]]>
Vous souhaitez créer un effet "wow" sur votre portfolio en ajoutant du texte 3D ?
Vous avez frappé à la bonne porte, car on va apprendre pendant ce live coding à créer un texte 3D animé dans votre portfolio.
C'est exactement ce que nous allons faire, et ce en moins de 2h !
On va coder une animation 3D sur du texte, pour cela, on va utiliser :
- le framework ThreeJS
- et JavaScript
On va apprendre :
- les bases de la 3D en JS
Partie 2 (1h30min) :
Partie 1 (22min) :
]]>
Dans la partie 1 (18min), on va :
Dans la partie 2 (1h47min), on va :
Vidéo partie 1 (18min) :
Pour optimiser le code et devenir un champion du lancé-franc, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit.
]]>Dans la partie 1 (18min), on va :
Dans la partie 2 (1h47min), on va :
Vidéo partie 2 (1h47min) :
Code source sur Github
Vidéo partie 1 (18min) :
]]>
Vous avez du mal à gérer votre temps lorsque vous travaillez sur l'ordi ?
Et si on pouvait se créer une todo list pour organiser nos tâches à accomplir ?
Eh bien, c'est exactement ce que nous allons lors de ce replay. Et ce en moins de 2h !
On va utiliser les technologies du web :
- HTML5
- CSS3
- et JavaScript (sans framework)
On va apprendre à :
Vidéo partie 2 (1h39) :
Code source sur Github.
Vidéo partie 1 (18min) :
]]>
Partie 2 (1h47) :
]]>
Si vous êtes amat·eur·rice de basket ou de jeux, apprenez à coder un jeu de basket pour envoyer des lancés-francs en à peine plus de 2 heures.
Pour se faire, nous allons utiliser les technologies suivantes :
- HTML5 Canvas
- JavaScript (avec P5.js)
- Gestion d'événements
Dans la première partie, on apprendra à:
Dans la seconde partie, on apprendra à :
Dans la partie bonus, on verra comment :
Vidéo de la partie 1 (24min) :
Pour optimiser le code et devenir un champion du lancé-franc, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit.
]]>Si vous êtes amat·eur·rice de basket ou de jeux, apprenez à coder un jeu de basket pour envoyer des lancés-francs en moins de 2 heures.
Pour se faire, nous allons utiliser les technologies suivantes :
- HTML5 Canvas
- JavaScript (avec P5.js)
- Gestion d'événements
Dans la première partie, on apprendra à:
Dans la seconde partie, on apprendra à :
Dans la partie bonus, on verra comment :
Vidéo partie 2 et bonus et code source :
Et le lien du code source.
Vidéo partie 1 :
]]>
Partie 1 (18min):
Partie 2 (1h33) :
Partie 2
Et le code source sur Github
Partie 1
]]>
Partie 1 (18min):
Partie 2 (1h33) :
Vidéo de la partie 1
Pour optimiser le code et devenir un vrai virtuose, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit.
]]>Tellement lent que l'on pourrait croire que c'est bloqué. Alors pour s'éviter de recommencer, je vous ai trouvé un moyen de vérifier si le téléchargement avance de manière plus précise.
Vous allez ouvrir Spotlight avec Cmd + Espace, ou en cliquant sur la loupe en haut à droite de votre écran.
Dans Spotlight, vous taperez "Console" puis "Entrée".
Le logiciel "Console" s'ouvrira. Puis cliquer sur "Démarrer la diffusion".
Tous les processus de votre ordinateur seront affichés. Mais vous ne voulez en regarder qu'un, celui qui télécharge XCode.
Donc, tapez "App Store" dans la barre de recherche en haut à droite (1). Et vous verrez des messages de ce type. Agrandissez votre "Console" au maximum pour voir le nombre entre 0 et 1 qui représente le pourcentage de téléchargement (2).
Normalement vous devriez voir plusieurs fois le même message apparaître avec les mêmes chiffres. Ca veut dire que le téléchargement continue mais qu'il est toujours en train de télécharger le même bloc de fichier. Si vous avez la fibre, au bout de 30s, vous verrez les chiffres changer. Si vous n'avez pas le fibre, je suppose que vous attendrez plus longtemps.
Mais au moins vous avez la certitude que votre téléchargement avance !
De mon côté, comme vous l'avez vu dans les captures d'écrans, j'étais à 90%, et maintenant je pense que le téléchargement est terminé.
]]>
Le scraping est la technique qui permet de récupérer des données sur un site web et de les ordonner.
Dans le cadre d'une recherche de job, plutôt que d'aller sur plusieurs sites jours après jour, vous pouvez apprendre à coder un script qui récupère plusieurs offres en une commande.
C'est ce que nous allons faire en moins de 2h.
Dans la première partie (11min), on va :
Dans la seconde (1h48), on va :
Partie 1 (11min) :
Pour accéder à la partie 2, il vous faudra créer un compte gratuit.
]]>C'est ce que nous allons faire en moins de 2h.
Dans la première partie (11min), on va :
Dans la seconde (1h48), on va :
Partie 2 (1h48) :
Et le code source sur Github.
Partie 1 (11min) :
]]>
Créer un bot Discord qui fait le jeu du pendu en multiplayer
Coder le jeu du pendu c'est déjà pas simple (mais on l'a déjà fait : https://www.youtube.com/watch?v=ZVkVhGR6Pr0 ) alors maintenant on va faire un portage de ce jeu dans un bot Discord.
C'est ce que nous allons faire, ensemble, dans ce live et en moins de 2h !
On y apprendra :
Partie 1
- La création d'un bot Discord
- La lecture de la documentation Discord
Partie 2
- La gestion des messages de plusieurs participants
Vidéo de la partie 2 :
Le code source sur Github
]]>Créer un bot Discord qui fait le jeu du pendu en multiplayer
Coder le jeu du pendu c'est déjà pas simple (mais on l'a déjà fait : https://www.youtube.com/watch?v=ZVkVhGR6Pr0 ) alors maintenant on va faire un portage de ce jeu dans un bot Discord.
C'est ce que nous allons faire, ensemble, dans ce live et en moins de 2h !
On y apprendra :
Partie 1
- La création d'un bot Discord
- La lecture de la documentation Discord
Partie 2
- La gestion des messages de plusieurs participants
Partie 1 (29min) :
Pour voir finir le jeu et gérer le messages de plusieurs participants et avoir le code source, voici la partie 2 (1h23).
]]>Dans la vie d'une application web, il est important de pouvoir vérifier que le développement des nouvelles fonctionnalités de "cassent" pas les fonctionnalités passées.
La première technique serait de re-tester toute l'application soi-même mais pour les grosses applications, cela prendrait trop de temps.
C'est pour ça qu'on utilise les tests automatisés : du code qui vérifie l'intégrité du code.
Et on va aussi voir les principes du TDD (Test Driven Development - Le développement dirigés par les tests).
Durant ce live, on va créer se mettre dans le contexte d'un jeu d'échec. On va créer des scénarios de tests qui va nous permettre de savoir quelles sont les cases jouables quand on choisi un pion (Image d'exemple. On ne va faire que du code : https://imgur.com/a/SmH9Yv9 )
On va partir de zéro et on va créer quelques tests pendant 2h, ensemble !
Pour se faire, nous allons utiliser les technologies suivantes :
- Node.JS
- Mocha
Pour utiliser le watcher et faire du TDD, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
Vous pouvez créer un compte de membre gratuit.
]]>Dans la vie d'une application web, il est important de pouvoir vérifier que le développement des nouvelles fonctionnalités de "cassent" pas les fonctionnalités passées.
La première technique serait de re-tester toute l'application soi-même mais pour les grosses applications, cela prendrait trop de temps.
C'est pour ça qu'on utilise les tests automatisés : du code qui vérifie l'intégrité du code.
Et on va aussi voir les principes du TDD (Test Driven Development - Le développement dirigés par les tests).
Durant ce live, on va créer se mettre dans le contexte d'un jeu d'échec. On va créer des scénarios de tests qui va nous permettre de savoir quelles sont les cases jouables quand on choisi un pion (Image d'exemple. On ne va faire que du code : https://imgur.com/a/SmH9Yv9 )
On va partir de zéro et on va créer quelques tests pendant 2h, ensemble !
Pour se faire, nous allons utiliser les technologies suivantes :
- Node.JS
- Mocha
Partie 2 (53min) :
Et le code source sur Github.
Partie 1 (50min) :
]]>