La question est, quel est mon projet? Mais je ne sais pas. Les plans changent. Il y a beaucoup d'idées. Mais il y a toujours une fonctionnalité de base commune. Jusqu'à présent, je parle de cela. Déjà 5 mois. Après l'exacerbation du printemps, dans un accès de solitude, je souhaite partager certains développements.
La première étape a été de déployer l'application Create React. Il devra être finalisé avec un fichier. Il est depuis longtemps possible de contourner la commande d'éjection effrayante avec react-app-rewired. Sinful, config-overrides.js est complètement à moi; Il s'est avéré maladroitement, je veux le réécrire sur des lentilles fonctionnelles. Mais tout fonctionne: espaces de travail de fil, plugins babel, moins de chargeur (pour la personnalisation de Ant-Design), chemins d'importation absolus.
Prettier configuré de manière à ce que le projet ait une config pour VSCode et commits (.prettierrc est à la racine). À un moment donné, la mise en scène non pelucheuse a cessé de satisfaire, je ne me souviens pas pourquoi. Assez rapidement est venu le remplacer (pour savoir comment se connecter, voir package.json). Et il était très ennuyeux de constater que le formatage des fichiers json du service était plus joli. Ajout d'exceptions à .prettierignore pour package.json et tsconfig.json - un peu moins de déchets dans les commits.
Quelques mots sur l'utilitaire nvm. À la racine se trouve .nvmrc avec la version spécifiée du bundle node + npm, dans mon cas "stable". Assez pour faire $ nvm use pour changer l'environnement. Très confortable.
Lerna ressemblait autrefois à un monstre effrayant. Par conséquent, j'utilise explicitement une $ lerna publish . Les packages de mon mono-référentiel sont publiés sur npmjs.com avec une mise à jour de leur propre version, que vous choisissez en mode interactif. En combinaison avec des espaces de travail de fil, il est possible de décomposer le projet en packages et de les développer en même temps (le rechargement à chaud fonctionne pour tout le code). L'incarnation pratique de la connectivité et de la connectivité. Google si vous ne savez pas ce que c'est; aide beaucoup à gérer la complexité du code. Il a également foiré le correctif cumulatif pour créer des packages, et il utilise les paramètres typographiques généraux de l'application hôte mono-référentiel.
À propos d'Ant-Design. Il est étonnant de voir combien de gestionnaires et de développeurs ne comprennent pas les avantages de construire une maison à partir de briques finies et se précipitent pour produire leurs propres briques. Faut-il vraiment réinventer l'implémentation de la fenêtre modale? Apprendre à personnaliser et à composer est une pratique réappliquée; c'est le prochain niveau d'abstraction dans la construction de la complexité technologique. Il suffit de changer légèrement l'approche de la conception, compte tenu des restrictions. Je dois danser du poêle, au lieu de l'habituel "je le vois". Mais l'avantage me semble évident et substantiel.
Dans Ant-Design, moins est utilisé - le préprocesseur CSS. Environ 700 variables sont disponibles. Personnalisez - je ne veux pas. Cependant, mon choix est css-in-js. Ensuite, vous devez extraire les variables requises en javascript - à l'intérieur de less-loader, il y a une option modifyVars. Pour réutiliser le même theme.js dans NodeJS et ES, j'ai utilisé esm: const requireForES = require('esm')(module /*, options*/) . Mais de nombreuses variables sont dérivées d'autres, par exemple @primary-color: @blue-6 . Le proxy a aidé pour les champs du thème: primaryColor: (theme) => theme.blue6 ; si le champ dans le thème est une fonction, appelez la fonction, et donc récursivement au champ suivant, jusqu'à ce que nous arrivions au champ avec la valeur finale. Et il y a moins de mixins - c'est du code js emballé en moins; par exemple, j'ai copié la fonction colorPalette: primaryColor5: (theme) => colorPalette(theme.primaryColor, 5) nouveau en javascript. Sources theme.js .
Oh, j'ai mangé le chien sur des composants de style. Mais vous ne devriez pas perdre de temps sur les histoires, car la sortie de Reshadow approche (je veux vraiment le croire). Une présentation très inspirante au React Russia 2019. En prévision des vacances, ce sera un niveau de confort de développement différent. En attendant, seulement sur un point général, j'ai inclus dans les paramètres "editor.foldingStrategy": "indentation" pour "editor.foldingStrategy": "indentation" normalement le code CSS à l'intérieur de la chaîne de modèle. Agacé que l'éditeur ne se souvienne pas minimisé. Il faudrait chercher un plugin.
Les projets dans mes plans sont différents, mais invariablement, que les projets sont pour des participants actifs. Ensuite, vous avez besoin d'une fonctionnalité d'autorisation. De préférence sans mot de passe. Réponse: Kit de compte Facebook. Un code numérique court pour la connexion est envoyé par lettre, SMS (gratuit) ou un message sur WhatsApp. Il a écrit son wrapper sur l'API pendant qu'il vit à l'intérieur du projet en tant que composant React. Cela fonctionne très bien. Maintenant, je veux le mettre dans un paquet npm, à cette époque, je ne savais pas comment utiliser les espaces de travail lerna + yarn.
De nombreux projets sur le contenu texte. Besoin d'un éditeur de texte. Juste démarque - pas assez. Oui, à l'intérieur du format de démarque, vous pouvez ajouter des insertions HTML, mais ce n'est pas un éditeur pour le grand public, mais pour les pirates. La sortie est un éditeur de blocs. Et pour les blocs dont vous avez besoin pour stocker des métadonnées. Par exemple, un widget de galerie d'images - quelques clics de souris et vous avez terminé. Et je veux aussi réorganiser les blocs, également avec la souris. J'aime koenig-editor dans Ghost et EditorJS toujours domestique. Il est clair que medium.com est le géniteur. Mais je ne suis pas satisfait de la fonctionnalité à 100%. Et il ne s'agit pas de React. Peut prendre DraftJS par Facebook? Malheureusement, vomi. SlateJS inspiré par lui remporte relativement le moment. Mais SlateJS est un constructeur de plugins. Il devrait y avoir des assemblages prêts à l'emploi basés sur elle. Sous le spoiler se trouve une longue liste des avantages et des inconvénients de certains.
Texte masquécanner-slate-editor
[+] n'affiche pas le menu flottant lorsqu'une souris sélectionne un en-tête ou du texte dans un bloc avec du code
[-] lorsque l'opération de glisser-déposer est terminée pour l'image, un curseur non dessiné est observé
[+] signe plus avec un menu contextuel lorsque le curseur se trouve sur une ligne vide en dehors du bloc de code (comme dans Ghost, mais il y a aussi un signe plus lorsque vous amenez la souris à la fin du texte)
[+] Un signe plus avec un menu contextuel apparaît à la fin de la ligne (mais si la ligne est décorée comme "H2", alors le signe plus n'apparaît plus - ce n'est pas un bug, mais une fonctionnalité)
[+] animation signe plus avec menu contextuel (il n'y a rien de tel dans Ghost); et le signe plus se transforme en croix lorsque le menu est ouvert
[-] dans le menu contextuel il y a des boutons pour formater le texte (dans Ghost il n'y a que des widgets)
[+] application de composants antd pour les outils à l'intérieur de l'éditeur
[+] riche fonctionnalité pour charger des images: drag'n'drop, url, ouvrir un fichier
[-] Les photos ne peuvent être téléchargées qu'une seule à la fois (pas de widget galerie)
[+] il y a alignement des images et autres blocs
[+] modification de la taille de l'image (mais ce serait plus facile, comme dans les modes Ghost regular-white-full)
[+] application de formatage de démarque
[-] drag'n'drop manquant pour les cartes (dans la terminologie Ghost)
[+] widget de table, comme dans le bon vieux MS Word
[-] par url, vous ne pouvez insérer que de la vidéo (dans Ghost, c'est le widget "Autre ...", qui supporte bien d'autres choses - "contenu intégré")
[-] le widget de lien ne permet pas de le modifier (dans Ghost c'est possible)
[-] Le menu survolant et les liens d'url-popup apparaissent en même temps (dans Ghost, la sélection de texte masque les liens d'url-popup)
[-] Le menu flottant glisse sur le bord de la zone éditée (dans Ghost, il est aligné sur le bord)
page-réaction (ory-editor)
Mode [+] pour changer la composition des blocs via drag'n'drop
[+] mode de redimensionnement pour les images et autres blocs, s'il y en a plusieurs dans la même ligne (mais uniquement via drag'n'drop)
Mode [+] pour ajouter des widgets (mais uniquement via drag'n'drop)
[+] Le mode "aperçu du résultat" modifie le comportement des widgets (par exemple: l'image devient cliquable)
[+] dans le mode de modification de la composition des blocs, un bloc avec une image peut être inséré dans un bloc avec du texte via drag'n'drop - de sorte que le texte encadre l'image; en plus il y a une "protection contre le fou": vous ne pouvez donc insérer qu'une seule image
[-] sans souris la fonctionnalité est très limitée
[-] pas d'étirement de la taille de l'image (comme dans les modes Ghost regular-white-full)
[-] il n'y a pas du tout de formatage de démarque (il y a deux modes dans Ghost: dans le texte, dans un widget séparé)
[-] il n'est pas évident de supprimer un bloc d'image (vous devez le faire glisser vers le panier via drag'n'drop) - vous devez déplacer l'icône du panier hors du texte
[-] il n'y a pas de cadre de mise au point pour le widget d'image dans le mode d'édition de propriété (bien qu'il existe un widget vidéo HTML5, l'indication du navigateur définit probablement l'indication de mise au point)
[+] la barre d'outils pour éditer l'élément courant (barre d'outils pour le texte, ou une boîte de dialogue pour les images etc.) apparaît au sous-sol et y est ancrée
[-] le mode d'ajout de widgets revient à l'état initial de la sélection des widgets après l'insertion d'un widget, mais je voudrais procéder à l'édition du widget ajouté; C'est probablement ce qui était prévu: d'abord, jetez des blocs, puis modifiez-les à leur tour
[-] l'url du lien est bêtement supprimée en cliquant sur le bouton, mais je voudrais faire apparaître la URL du lien et la boîte de dialogue d'édition du lien (Ghost n'a pas non plus d'édition, seulement un champ de saisie vide pour un nouveau lien); il est clair que des compromis en raison d'un conflit possible de l'ajout d'un lien à un lien doivent être élaborés; pour raison, une boîte de dialogue sert à éditer le lien (et à l'afficher) et à suivre ce lien
[-] il n'y a pas de glisser-déposer dans l'outil d'édition d'image pour ajouter l'image originale
[-] pas de widget pour le code
[-] drag'n'drop n'est pas implémenté pour charger les images
[-] la boîte de dialogue de sélection des fichiers système pour le téléchargement d'images ne filtre pas les fichiers valides (seules les images doivent être affichées)
[-] dans Ghost, en mode drag'n'drop, les autres éléments sont décalés de façon animée pour la barre du pointeur où le drop sera exécuté
[-] dans le mode de modification de la composition des blocs par glisser-déposer, un pointeur de bande parasite est affiché en double (apparemment en raison d'éléments div supplémentaires)
netlify-cms-widget-markdown
[+] Vous pouvez voir comment se marier ardoise et remarque (remarqueSlate.js, slateRemark.js)
[+] plugins slate-edit-list et slate-edit-table intégrés
[+] deux implémentations d'éditeur: RawEditor et VisualEditor
santé mentale
[+] sélection de recadrage pour les photos (voir pièce jointe) - ne s'applique pas aux slate-js
[+] coller le démarque (?)
D'accord, je dois bricoler avec ma très, meilleure construction sur SlateJS. Ensuite, habr.com va le visser sur lui-même. Réfléchissez à la raison pour laquelle vous avez besoin de VueJS (blague). Donc, vous avez d'abord besoin d'une composition de contrôles pour contrôler l'éditeur: pour ajouter de nouveaux blocs, pour contrôler le bloc sélectionné, pour modifier les paramètres du bloc, pour formater le texte sélectionné. J'ai copié plusieurs fois, il semble s'être installé, alors que j'aime ça. Contrôles basés sur Ant-Design. Publication des commandes d'ardoise du package npm. Ne jugez pas strictement - c'est un enfant bien-aimé.
Images élégantes sur le téléphone Sources du futur projet .