Catégories
Astuces et Design

Boostez votre apprentissage en vous amusant – Smashing Magazine

A propos de l'auteur

Jhey fait des choses géniales pour des gens formidables! C'est un développeur Web avec près de 10 ans d'expérience. Travailler avec et pour des noms tels que Eurostar, Uber,…
Plus à propos
Jhey

Dans le monde du développement axé sur les produits, il peut être facile d'oublier la joie de fabriquer pour le plaisir de fabriquer. En abandonnant le «pourquoi» et le «comment», et en vous concentrant plutôt sur le «quoi» d’idées étranges et merveilleuses, vous pouvez cultiver un aspect totalement différent de vos compétences.

On me demande souvent d’où viennent les idées. Comment savoir ce que je fais? Avoir dix ans d'expérience dans le développement aide, mais ce qui a dynamisé mon apprentissage, c'est de me pousser à construire les choses qui me passaient par la tête, même inhabituelles. J'ai développé un appétit pour construire des choses qui ne sont pas «la norme». Avec cet état d'esprit, chaque idée devient une opportunité d'essayer quelque chose de nouveau.

L'un de mes principaux mantras est de rendre l'apprentissage amusant. C'est quelque chose par lequel les gens me connaissent. Ampoules SVG tractables avec GreenSock, Vincent van Git, Machines inutiles avec React… bien plus encore. Vous pouvez lire les documents, vous pouvez suivre les tutoriels, mais ne seriez-vous pas plus motivé en essayant de créer quelque chose d'unique, quelque chose que personne d'autre n'a vu auparavant?

Voici comment vous amuser peut booster votre apprentissage. Lancez un disque, choisissez une ambiance et allons-y.

Voir le stylo (Superstar DJ v3.0 w / ScrollTrigger 😎 (Faites défiler jusqu'à zéro!)) (Https://codepen.io/smashingmag/pen/NWRKMQm) par @ jh3y.

Voir le Pen Superstar DJ v3.0 avec ScrollTrigger 😎 (Faites défiler jusqu'à zéro!) Par @ jh3y.

Vouloir apprendre

Il y a une grande mise en garde à tout ce que je vais dire: si vous n’êtes pas motivé à apprendre, vous n’apprendrez pas. Même si vous savez que c'est quelque chose que vous devez apprendre. Le besoin est facultatif, mais le besoin ne l'est pas. Les chances sont que si vous ne voulez pas faire quelque chose, vous ne le ferez pas. Après tout, la plupart d'entre vous qui lisez ceci sont probablement non scolarisés maintenant. Vous n'êtes pas obligé de vous préparer à cet examen ou d'obtenir cette note. Vous avez votre libre arbitre.

Dans la plupart des cas, l'apprentissage est guidé par un objectif ou une cible. Un exemple extrême serait l'objectif de payer vos factures. «Je dois apprendre X pour mon travail, pour garder mon travail et payer mes factures». Cet article ne concerne pas ces scénarios. Il s’agit des moments où ce n’est pas nécessaire. (Après tout, vous ne pouvez reconstruire votre portefeuille que plusieurs fois.)

Je dois revenir un peu en arrière pour réfléchir à la façon dont j'ai écrit cet article. Je n’ai pas toujours été un apprenant parascolaire ni même un codeur créatif. J'ai en fait commencé en tant que développeur middleware. J'ai terminé mes diplômes, j'ai trouvé mon travail et j'étais heureux de faire la journée de huit heures et de la laisser là-bas. Ce n’est que vers la fin de mon premier rôle que j’ai rencontré le «front-end» et que j’ai commencé à y barboter.

La première chose dont je me souviens avoir fait était un clone de base de Trello. C'était l'occasion d'essayer le «glisser-déposer» HTML5 et le contenteditable attribut. C'était très basique et vous pouviez créer des tâches et les déplacer. Je l'ai mis dans un jsfiddle ou jsbin et l'a partagé. Certains collègues ont trouvé que c'était cool, et c'est tout. Malheureusement, j'ai perdu cette démo maintenant, mais voici une récréation rapide de mémoire.

Voir le stylet (tableau des tâches HTML5 Drag & Drop) (https://codepen.io/smashingmag/pen/dypbOww) par @ jh3y.

Voir le tableau des tâches de glisser-déposer Pen HTML5 par @ jh3y.

Avance rapide un peu et l'animation CSS et les transformations 3D étaient sur mon radar. En fait, le CSS 3D et l'animation ont été parmi les premières choses avec lesquelles j'ai passé du temps à jouer. Une chose avec laquelle j'ai commencé a été de créer une collection de fileurs de chargement. Si j'avais quelques instants, je m'amuserais avec différentes propriétés et verrais ce que je pourrais faire en les ajoutant tout le temps à un fichier. Plus tard, je transformerais tout en un projet GitHub.

Un modèle émergeait de moi voulant faire des choses. Et quand l'occasion d'essayer quelque chose se présentait, je l'associais à une idée et je voyais ce qui s'était passé. D'autres ajustements à ce clone de Trello ont reçu de précieux commentaires lorsque je l'ai publié sur Hacker News. Cela m'a incité à en créer de nouvelles versions. Je n'y ai pas touché depuis quelques années, mais il vit toujours sur Github.

Quelques projets parallèles et quelque temps après, une démo d'ours clignotant, que j'ai postée sur CodePen. CodePen était nouveau pour moi à ce stade.

Voir le stylo (ours Gricssly) (https://codepen.io/smashingmag/pen/jOMNyOB) par @ jh3y.

Voir l'ours Pen Gricssly par @ jh3y.

Le lendemain, j'étais sur un site client et quelqu'un a dit: «J'ai vu votre stylo sur la première page de CodePen! Agréable!". J'ai dit «Merci!», Mais je n'avais aucune idée de ce que cela signifiait avant d'aller vérifier. Et il y avait l'ours clignotant! Cela a été un catalyseur de mon «caractère ludique» avec le code, où le motif s'est inversé. Je suis passé de «Je veux apprendre X, alors comment puis-je l'adapter à Y» à «Je veux faire Y, puis-je apprendre X à le faire?

C’est ce qui me motive et rend l'apprentissage amusant. Cela pourrait fonctionner pour vous aussi! Au lieu que l'idée d'apprendre X soit la force motrice, c'est l'idée de créer Y. Le fait d'acquérir de nouvelles compétences est un bonus. Au fur et à mesure que mes compétences se sont développées, la capacité à rendre mes démos de plus en plus «ludiques» est perceptible. Mais tout a commencé par faire des choses pour faire des choses et apprendre quelque chose. "Comment feriez-vous cela?" et non «Comment pouvez-vous apprendre cela?». Au fur et à mesure que vos compétences se développent, vous pouvez également devenir plus ludique avec votre code. Et les deux se compléteront.

Codage ludique

D'où viennent toutes les idées? Eh bien, c’est une bonne question. Nous ne pouvons pas forcer la créativité, mais il y a des choses que je peux suggérer qui pourraient aider à la convaincre d’apparaître.

Tout documenter

Obtenez un bloc-notes, démarrez un tableau Trello, ouvrez un compte Notion. Trouvez un moyen de prendre des notes de vos idées. Aucune idée n'est une mauvaise idée. Répéter. Aucune idée n'est une mauvaise idée. J'écris chaque petite étincelle qui me vient à l'esprit. C’est pourquoi je vous suggère une solution numérique que vous pouvez installer sur votre téléphone. Vous ne savez jamais quand vous aurez une idée, et ce sera ennuyeux le lendemain quand vous ne vous en souviendrez plus. Croyez-moi, j'y suis allé.

Voici cinq éléments aléatoires de ma "Liste" qui déclenchent tous quelque chose pour moi:

  • Champignons rouges et blancs;
  • Spin-off de case à cocher impossible;
  • Peter Griffin stores en CSS;
  • L'écran de mise sous tension éblouit une énorme parallaxe du documentaire du jeu;
  • Pain Array tranche / bande dessinée d'épissure.

Une partie de cela pourrait avoir du sens. Certains pourraient ne pas l'être. L'important est d'écrire des mots-clés qui déclenchent des réflexions sur quelque chose que je veux faire. Je peux vous dire que la première idée est un dessin Procreate, et la quatrième provient d'une émission que j'ai regardée sur Netflix. Il y avait une partie de la série où le visage d'un personnage était presque parallaxe à l'écran. Je pensais que cela ferait une superposition Twitch amusante si je pouvais le faire. Sur la liste, ils vont.

Une autre solution que j’ai récemment adoptée et que j’ai également suggérée est de garder les cahiers parsemés. Un à côté du lit est super! Cela signifie que vous n’avez pas besoin de sortir du lit pour écrire cette idée que vous venez d’avoir. Votre prise de notes ne doit pas non plus se limiter à des idées. Documentez vos processus et autres choses au fur et à mesure. Vous constaterez que griffonner des choses peut souvent susciter de nouvelles idées.

Idées étincelantes

Cela mène à «Où?». D'où pouvez-vous saisir une idée? La réponse ici est très cliché: n'importe où! Plus j'en parle avec les gens, plus cela ressemble à un instinct que vous affinez. Arracher des idées de rien est quelque chose que vous entraînez votre esprit à faire au fil du temps.

Pour lancer les choses, voici une liste d'endroits où vous pouvez aller pour commencer:

CodePen

CodePen est une excellente ressource. Jetez un œil, voyez ce que les gens font. Pourriez-vous faire quelque chose de similaire? Quelqu'un a créé un éléphant avec CSS, pouvez-vous créer une girafe? CodePen envoie une invite hebdomadaire par e-mail vous demandant de faire quelque chose. Il y aura un thème ou certains critères et vous pouvez suivre les balises pour voir ce que les gens font. Et puis il y a Spark, la newsletter de CodePen, qui sera généralement pleine de choses sympas. Il y a plein de super démos sur le site, des gens qui donnent des commentaires. C’est un endroit inspirant.

Voir le stylo (ampoule à tirer! 💡 (GSAP Draggable && MorphSVG)) (https://codepen.io/smashingmag/pen/NWRKdxd) par @ jh3y.

Voir l'ampoule à tirer du stylo! 💡 (GSAP Draggable && MorphSVG) par @ jh3y.
Médias (TV, livres, cinéma)

Vous pouvez obtenir beaucoup d'idées des médias. Vous avez vu une publicité télévisée sympa? Pouvez-vous en recréer une partie? Qu'en est-il du générique d'ouverture d'un film? Beaucoup de choses surgissent qui peuvent susciter un peu de créativité. Les livres sont une autre excellente ressource – fiction et non-fiction. J'ai créé ce curseur HSL après avoir lu Refactorisation de l'interface utilisateur:

Voir le Pen (HSL Slider w / React + CSS vars 🤓🎨) (https://codepen.io/smashingmag/pen/zYKONBJ) par @ jh3y.

Voir le curseur Pen HSL w / React + CSS vars 🤓🎨 par @ jh3y.

Et ceci est tiré du générique de clôture de la série Netflix, «Love, Death, and Robots»:

Voir le stylo (Love, Death & Robots outro w / GSAP 🤓) (https://codepen.io/smashingmag/pen/rNMBjqo) par @ jh3y.

Voir la sortie Pen Love, Death & Robots avec GSAP 🤓 par @ jh3y.
Bulletins

Inscrivez-vous aux newsletters qui vous intéressent. Vous n'êtes pas obligé de les lire tout le temps, mais ils sont là pour vous. J'ai déjà mentionné celui de CodePen. Codrops est un autre excellent outil pour voir une variété de démos. Ils font également un "Awesome Demos Roundup". CSS Tricks est un autre avec d'excellentes lectures et ressources. Ou, bien sûr, le Briser bulletin.

Cette démo ci-dessous a été créée en raison d'un défi défini dans la newsletter ViewBox. Et l'idée s'est elle-même inspirée du film Hommes en noir que j’avais regardé deux fois cette semaine.

Voir le stylo (Orion's Galaxy v2) (https://codepen.io/smashingmag/pen/eYdOgdr) par @ jh3y.

Découvrez le Galaxy v2 du Pen Orion par @ jh3y.
Muzli

J'aime celui la. Muzli est une extension de navigateur qui remplit votre écran «Nouvel onglet» d'inspiration de conception. Parcourez ceci lors de l'ouverture d'un nouvel onglet et vous ne manquerez pas de trouver des idées. Ils font également un tour d'horizon pour diverses choses sur Medium. J'ai souvent repris des idées en les parcourant. Comme cette démo inspirée de ce tour d'horizon. RamBear était une recréation de ce tir de Dribbble de «Gigantic» avec une rotation d'ours dessus.

Voir le stylo (nom de code: RamBear 😅) (https://codepen.io/smashingmag/pen/ZEpzLBx) par @ jh3y.

Voir le nom du code de plume: RamBear 😅 par @ jh3y.
Nouvelles et saisonniers

L'actualité et les événements saisonniers ne manqueront pas de susciter des idées. Que diriez-vous des démos fantasmagoriques pour Halloween? J'ai fabriqué cet ours avec une radiographie à cause d'un défi CodePen prévu pour Halloween.

Voir le stylo (Bear obtient une radiographie avec des variables CSS 🐻🔍 #CodepenChallenge) (https://codepen.io/smashingmag/pen/ZEpzLLo) par @ jh3y.

Voir le Pen Bear obtient une radiographie avec des variables CSS 🐻🔍 #CodepenChallenge par @ jh3y.

Ou tu te souviens quand tout était gâteau? Ouais? J'ai pensé à faire un gâteau 3D avec lequel vous pourriez interagir et c'est parti de là. Mon catalogue arrière regorge de démos liées à l'actualité.

Voir le stylo (CSS is cake 🍰 (Tapez les tranches! 👇)) (https://codepen.io/smashingmag/pen/WNGeRpO) par @ jh3y.

Voir le stylet CSS is cake 🍰 (Appuyez sur les tranches! 👇) par @ jh3y.
Dribble

Dribble est un excellent site pour découvrir le travail créatif d'autres personnes, et il pourrait susciter vos propres idées. Il n’est pas rare de voir des gens recréer des choses qu’ils ont vues sur Dribbble. Cela dit, si vous faites des loisirs, merci de mentionner l'œuvre originale. Ce n’est pas une «inspiration» si vous prenez l’original, le recréez et vous en attribuez le mérite. Vous profitez de l'occasion pour découvrir le travail de l'auteur original.

Reddit

Je ne suis pas moi-même un grand utilisateur de Reddit. Mais, vous pouvez parfois trouver des animations et des choses intéressantes dans divers sous-Reddits. / r / curieusement satisfaisant a eu l’animation occasionnelle que j’ai recréée. Cette animation de cubes était quelque chose que je voulais recréer. En même temps, je voulais essayer GreenSock. J'ai donc jumelé les deux et c'était la première fois que j'utilisais GreenSock. Honnêtement, essayez de rechercher des "cubes étrangement satisfaisants".

Voir le stylo (Cubed 😅) (https://codepen.io/smashingmag/pen/LYRPxWo) par @ jh3y.

Voir le Pen Cubed 😅 par @ jh3y.

Des années plus tard, j'ai revisité cela pour le construire d'une manière différente. Cela m'a permis de faire un tour dessus.

Voir le stylo (cubes de couleur infinie) (https://codepen.io/smashingmag/pen/JjRPEwP) par @ jh3y.

Voir les cubes de couleur Pen Infinite de @ jh3y.
Twitter

Si vous avez un compte Twitter, suivez les personnes qui vous intéressent et vous inspirent. Ils pourraient être dans un domaine complètement différent, mais leur travail pourrait bien susciter des idées pour vous. Il existe des récits fantastiques. Un compte qui me vient à l'esprit est @beesandbombs. Ils téléchargent de vraies animations cool qui contiennent souvent des illusions d'optique. J'ai souvent pensé «Je vais faire ça», puis j'ai essayé un moyen de le faire, que ce soit CSS, HTML5 Canvas, etc. C’est un excellent moyen de s’entraîner à travailler sur les moindres détails.

N'importe où ailleurs

Je pourrais continuer à énumérer des sources d'inspiration, mais cela peut être différent pour tout le monde. Ce sont ceux qui fonctionnent pour moi. Mais considérez n'importe quoi. Les choses que vous voyez lors de vos voyages, conversations ou choses dans la maison.

Transformer les idées en démos et projets

Vous avez vos idées. Mais il n’ya pas de précipitation pour les fabriquer. Vous n’avez pas à faire tout ce que vous notez. En fait, il y a de fortes chances que vous n'ayez jamais le temps de tout faire. C’est quelque chose que vous devez gérer. C’est quelque chose avec lequel j’ai eu du mal à mieux documenter mes idées.

Voir le stylo (LEGO Cyber ​​Truck w / three.js 😅🚙) (https://codepen.io/smashingmag/pen/xxEKgrB) par @ jh3y.

Voir le Pen LEGO Cyber ​​Truck w / three.js 😅🚙 par @ jh3y.

Si vous parcourez mon historique CodePen, c'est comme une chronologie de ce que j'ai appris et exploré, guidé par des idées et de l'inspiration. L'idée de faire quelque chose, pas d'apprendre quelque chose. Je n’ai généralement pas le temps de revenir sur les anciennes démos, mais cet article l’a incité. Il est intéressant de regarder en arrière et de se souvenir de ce qui a motivé quoi.

Par exemple, je voulais créer des mises en page de maçonnerie, j'ai donc appris la technique en utilisant flex. Je voulais créer des champs en étoile, j'ai donc appris les techniques de rendu HTML5 Canvas. En fait, je me souviens avoir appris ce dernier le matin au petit déjeuner.

Voir le stylo (lampe à lave CSS générée aléatoirement 💡 #CodePenChallenge) (https://codepen.io/smashingmag/pen/yLaBgoK) par @ jh3y.

Voir le stylo Lampe à lave CSS générée aléatoirement 💡 #CodePenChallenge par @ jh3y.

Cette lampe à lave a été déclenchée par un défi CodePen. J'avais vu un peu sur les filtres SVG, mais je n'avais rien que je voulais essayer. Je voulais faire une lampe à lave avec CSS et c'était une opportunité parfaite.

Faites pour le plaisir de faire. Ne réfléchissez pas trop. Laissez-vous guider par l'idée car vous apprendrez des choses. Vous apprendrez probablement beaucoup plus de choses que vous ne l’auriez imaginé. Il peut et va renforcer votre capacité à relever un défi ou changez de contexte en un clin d'œil. Ce sont des compétences qui peuvent vraiment dynamiser votre carrière de développeur.

Documentez vos idées et quand vous voulez les réaliser, foncez! Si votre premier objectif est le «comment» ou le «pourquoi», cette idée pourrait rester sur votre liste pendant un certain temps.

Ne vous attardez pas sur le «pourquoi» et le «comment»

Je fais beaucoup de choses «fantaisistes» et on me demande souvent: «Pourquoi?», «Y a-t-il une utilité pratique pour cela?», Etc. Ne vous attardez pas sur ce côté des choses. Vous faites quelque chose parce que vous le souhaitez. Faire quelque chose de non conventionnel peut être plus amusant que de suivre «Créer une application TODO 101». Il y a un temps et une place pour les 101 ans, mais je veux que tu aimes apprendre. Gagnez en appétit pour créer des choses merveilleuses qu'aucun de nous n'a jamais vues.

Travaillez sur les idées qui suscitent la joie pour vous. Ne laissez pas le "Comment?" vous distraire. Concentrez-vous sur le «Quoi?». Le but est de se faire une idée, puis de trouver un moyen de la réaliser. Si cela signifie apprendre quelque chose de nouveau – super. Si vous pouvez le faire avec quelque chose déjà dans votre ceinture à outils – génial. Laissez les idées vous guider. La variété de vos projets peut souvent vous mettre au défi d'utiliser des outils que vous connaissez déjà de différentes manières. Vous pouvez acquérir de nouvelles techniques en vous attaquant à des problèmes que d'autres n'auraient peut-être même pas vus. Cela vous donne la possibilité de penser «en dehors des sentiers battus».

Abordons également l’idée que ces éléments ne sont pas «utiles». Je ne pense pas que ce soit jamais le cas. Un exemple majeur pour moi est l'art CSS. «Pourquoi faire cela avec CSS? Utilisez une image comme SVG ». N'acceptez pas cela. En dessinant quelque chose avec CSS, vous améliorez vos compétences en créant des formes intéressantes, en apprenant l'index d'empilement, et bien plus encore. Ce qui est cool avec l'art CSS, en particulier, c'est que chaque création a tendance à générer un problème différent. Oui, vous ne déposerez pas ces 1 000 lignes de CSS dans un site de production de si tôt et vous utiliserez une image. Mais, est-ce que l'image vous a appris à utiliser clip-path ou être un sorcier avec border-radius?

Par exemple, une de mes démos est «La case à cocher impossible». C'est une bascule qui lorsque vous activez, un ours s'éteint. Plus vous l'allumez, plus l'ours est en colère. Si je m'étais concentré sur le "Comment?" alors cette démo n'a peut-être jamais pris vie. Au lieu de cela, j'ai esquissé ce à quoi je pensais pouvoir ressembler. Et puis j'ai décidé que j'allais utiliser React et GreenSock avec SVG.

Voir le stylo (Impossible Checkbox v2 🐻) (https://codepen.io/smashingmag/pen/bGwbgoW) par @ jh3y.

Voir la case à cocher Pen Impossible v2 🐻 par @ jh3y.

Ne laissez pas l’idée de «Comment?» vous dissuader du «Quoi?». Aussi, ne remettez jamais en question le "Pourquoi?" Faites des choses sympas et vous en apprendrez sans aucun doute.

Faire, fabriquer, fabriquer

Commencez à écrire vos idées et à créer des objets dans le but de créer des objets. C’est mon conseil si vous voulez passer au niveau supérieur et ajouter un peu de jeu à votre code.

Ce que vous apprenez retrouvera son chemin dans votre travail. À titre d'exemple récent, j'ai mis en place un eBook sur les animations CSS. J'aurais pu créer chaque démo avec un carré rouge, mais ce n'est pas très engageant. Au lieu de cela, le livre a animé des lapins, des voitures de course et des ovnis pour aider le savoir. Au lieu d'essayer de se souvenir de ce que faisait le carré rouge et comment. C'est "Rappelez-vous que nous avons tous fait sauter les lapins à des moments différents en utilisant le délai d'animation".

Voir le stylo (Bouncing Bunnies (animation-delay leçon) 😎) (https://codepen.io/smashingmag/pen/rNMBjGZ) par @ jh3y.

Voir la Pen Bouncing Bunnies (leçon sur le retard de l'animation) 😎 par @ jh3y.

C'est le point majeur. Être ludique avec votre code et ce qui peut sembler être un apprentissage «latéral» peut être un facteur déterminant pour faire évoluer vos compétences. Cela ne se remarque peut-être pas tout de suite, mais chaque fois que vous créez une nouvelle chose fantaisiste, vous passez au niveau supérieur!

Prenez un cahier, téléchargez une application de prise de notes (Notion, Trello, Keep) et commencez à documenter vos idées. Entraînez-vous à écrire des idées. Quelle que soit leur taille, même si elles sont petites, notez-les. Créez des idées à partir de choses qui vous intéressent. Inspiration de trésor. Inscrivez-vous aux newsletters. Ils n’ont pas à être liés à la technologie. Essayez muz.li. Lisez un livre, regardez un film. Bookmark Dribbble, peut-être.

Et quand le moment vient, commencez à faire! Lutte avec le «comment»? Essayez différentes méthodes, découvrez comment les autres font les choses, contactez les gens en ligne. Chaque étape vous apprend quelque chose de nouveau. D'ailleurs, ne vaut-il pas la peine de s'amuser pour lui-même de toute façon?

Éditorial fracassant(fb, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *