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 la documentation, vous pouvez suivre les didacticiels, 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 s'amuser peut booster votre apprentissage. Lancez un disque, choisissez une ambiance et allons-y.
Voir le stylo [Superstar DJ v3.0 w/ ScrollTrigger 😎 (Scroll to scratch!)] (https://codepen.io/smashingmag/pen/bGwbBvN) par @ jh3y . [19659009] Voir le stylo 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. (Vous ne pouvez reconstruire votre portfolio que tant de fois, après tout.)
Je dois revenir un peu en arrière pour réfléchir à la manière 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. Ce fut l'occasion d'essayer le HTML5 «Drag and Drop» et l'attribut contenteditable . 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 je l'ai 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 stylo [HTML5 Drag & Drop Task Board] (https://codepen.io/smashingmag/pen/dypbOww) 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 cela 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 quelques 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 [Gricssly bear] (https://codepen.io/smashingmag/pen/jOMNyOB) 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 pour le faire?".
C'est ce qui me motive et fait apprendre 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.
Documentez tout
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 choses aléatoires de ma "Liste" qui déclenchent toutes quelque chose pour moi:
- Champignons rouges et blancs;
- Spin-off impossible à cocher;
- Peter Griffin aveugle en CSS;
- L'écran de mise sous tension éblouit une énorme parallaxe du documentaire du jeu;
- Bread Array slice / splice cartoon.
Certains de ces éléments pourraient avoir un 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. Ils figurent sur la liste.
Une autre solution que j’ai récemment adoptée et que j’aurais é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.
Sparking Ideas
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 à partir de rien est quelque chose que vous entraînez votre esprit à faire au fil du temps.
Pour relancer les choses, voici une liste d'endroits où vous pouvez commencer:
CodePen
CodePen est un grande 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 le Spark le bulletin d’information de CodePen qui sera généralement plein 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 [Tuggable Light Bulb! 💡(GSAP Draggable && MorphSVG)] (https://codepen.io/smashingmag/pen/NWRKdxd) 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 Refactoring UI :
See the Pen [HSL Slider w/ React + CSS vars 🤓🎨] (https://codepen.io/smashingmag/pen/zYKONBJ) par @ jh3y .
Et ceci est tiré du générique de clôture de la série Netflix, «Love, Death, and Robots »:
See the Pen [Love, Death & Robots outro w/ GSAP 🤓] (https://codepen.io/smashingmag/pen/rNMBjqo) par @ jh3y .
Newsletters
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 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 Smashing newsletter .
Cette démo ci-dessous a été créée suite à un défi lancé dans la newsletter ViewBox . Et l'idée elle-même a été inspirée par le film Men in Black que j'avais vu deux fois cette semaine.
See the Pen [Orion’s Galaxy v2] (https://codepen.io/smashingmag/pen / eYdOgdr) par @ jh3y .
Muzli
J'adore celui-ci. Muzli est une extension de navigateur qui remplit votre écran «Nouvel onglet» d'inspiration design. Parcourez ceci lors de l'ouverture d'un nouvel onglet et vous ne manquerez pas de trouver des idées. Ils font aussi 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 cette rafle . RamBear était une recréation de ce Dribbble shot de "Gigantic" avec une rotation d'ours dessus.
See the Pen [Code name: RamBear 😅] (https://codepen.io/smashingmag/pen/ZEpzLBx) par @ jh3y .
News & Seasonal
Actualités et événements saisonniers sont sûrs d'obtenir 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 pour Halloween.
Voir le stylo [Bear gets an X-Ray w/ CSS Variables 🐻🔍 #CodepenChallenge] (https://codepen.io/smashingmag/pen/ZEpzLLo) par @ jh3y .
Ou vous souvenez-vous 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 🍰 (Tap the slices! 👇)] (https://codepen.io/smashingmag/pen/WNGeRpO) par @ jh3y .
Dribbble
Dribble est un excellent site pour vérifier le travail créatif des autres, et cela 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.
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 curieusement satisfaisants».
Voir le stylo [Cubed 😅] (https://codepen.io/smashingmag/pen/LYRPxWo) par @ jh3y .
Des années plus tard, j'ai revisité ceci pour le construire d'une manière différente. Cela m'a permis de l'essayer.
Voir le stylo [Infinite Color Cubes] (https://codepen.io/smashingmag/pen/JjRPEwP) par @ jh3y .
Si vous avez un compte Twitter, suivez les gens qui intéressent et 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.
– dave (@beesandbombs) 10 novembre 2020
Anywhere Else
I could keep énumérant 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. Des 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 .
Si vous parcourez mon histoire CodePen c'est comme une chronologie pour 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, alors j'ai 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 [Randomly generated CSS lava lamp 💡 #CodePenChallenge] (https://codepen.io/smashingmag/pen/yLaBgoK) 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.
Faire 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é. Cela peut et renforcera votre capacité à relever un défi ou à changer 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 faire, allez-y! 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 des 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 permet de penser «en dehors des sentiers battus».
Abordons également l’idée que ces choses 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 à devenir un assistant 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 . [19659009] Voir le stylo Impossible Checkbox 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.
Fabriquez, fabriquez, fabriquez
Commencez à écrire vos idées et à créer des choses pour le plaisir de faire des choses. C’est mon conseil si vous voulez passer au niveau supérieur et ajouter une touche ludique à votre code.
Ce que vous apprenez retrouvera son chemin dans votre travail. Comme exemple récent, j'ai rassemblé 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 lesson) 😎] (https://codepen.io/smashingmag/pen/rNMBjGZ) 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. Ce n'est peut-être pas perceptible tout de suite, mais chaque fois que vous faites quelque chose de 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?
Source link