Preparing to take over the world

The question is, what is my project? And I do not know. Plans change. A lot of ideas. But there is always a common basic functionality. Here I am about it. Already 5 months. After a spring exacerbation, in a fit of loneliness, I want to share some insights.

First of all deployed Create React App. He will have to modify the file. It has long been possible to bypass the terrible eject command with the help of react-app-rewired. Sin, config-overrides.js is completely mine; It turned out clumsily, I want to rewrite on functional lenses. But it works: yarn workspaces, babel-plugins, less-loader (for customizing Ant-Design), absolute import paths.

Prettier configured in such a way that in the project one config for VSCode and for commits (.prettierrc is in the root). At some point, lint-staged ceased to satisfy, I no longer remember why. He came to replace the pretty-quick (how to connect, see package.json). And it was very annoying that prettier reformatted auxiliary json files. Added exceptions in .prettierignore for package.json and for tsconfig.json - a bit less garbage in commits.

A few words about the nvm utility. At the root is .nvmrc with the specified version of the bundle node + npm, in my case "stable". Enough to do $ nvm use to switch the environment. Very comfortably.

Lerna once seemed a terrible monster. As a result, I use obviously only one command $ lerna publish . Packages in my monorapository are published on npmjs.com with updating your own version, which you choose online. In combination with yarn workspaces, it is possible to decompose a project into packages and develop them simultaneously (hot-reload works for all the code). The practical embodiment of connectivity and connectivity. Googling if you don't know what it is; It helps to manage the complexity of the code. I also screwed rollup to build packages, and it uses the common typescript settings of the mono-repository host application.

About Ant-Design. It's amazing how many managers and developers do not understand the advantages of building a house from prefabricated bricks, and rush to produce their own bricks. Is it necessary to reinvent the implementation of the modal window? Learning to customize and compose is a reusable practice, this is the next level of abstraction in increasing technological complexity. Just need a little change in the approach to design, given the limitations imposed. Dancing will have to stove, instead of the usual "I see it." But the benefit seems to me obvious and substantial.

Inside Ant-Design, less is used - the css preprocessor. About 700 variables are available. Customize - I do not want. However, my choice is css-in-js. Then you need to pull out the required variables in javascript - inside the less-loader there is an option modifyVars. To reuse the same theme.js in NodeJS and ES, I used esm: const requireForES = require('esm')(module /*, options*/) . But many variables are derivatives of others, for example, @primary-color: @blue-6 . Helped the proxy for the fields of the theme object: primaryColor: (theme) => theme.blue6 ; if the field in the theme is a function, then call the function, and so recursively to the next field, until we reach the field with the final value. And then there are less mixins - this is a js code packed in less; for example, copy-back to javascript colorPalette function: primaryColor5: (theme) => colorPalette(theme.primaryColor, 5) . Theme theme.js .

Oh, ate a dog on styled-components. But do not waste time on stories, because the release is nearing reshadow (really want to believe). A very inspiring presentation at React Russia 2019. In anticipation of the holiday, it will be a different level of ease of development. In the meantime, only about one general point, included in the VSCode settings "editor.foldingStrategy": "indentation" , in order to fold the css-code inside the template line normally. Annoyed that the editor does not remember minimized. Need to search plugin.

The projects in my plans are different, but invariably, that the projects are for active participants. Then you need authorization functionality. Preferably without passwords. Answer: Facebook Account Kit. A short numeric code for a login comes in a letter, or an SMS (for free), or a message in WhatsApp. I wrote my wrapper over the API, while it lives inside the project, like a react-component. It works great. Now I want to put in the npm-package, at that time I did not know how to use lerna + yarn workspaces.

Many projects about text content. Need a text editor. Just markdown - not enough to be. Yes, inside the markdown format, you can add inserts from HTML, but this is already an editor not for the mass consumer, but for hackers. Exit - block editor. And for the blocks, you need to store meta data. For example, a widget of a gallery of pictures - a couple of mouse clicks and everything is ready. And I also want to rearrange the blocks, also with the mouse. I like koenig-editor inside Ghost and also the native EditorJS . It is clear that medium.com is the progenitor. But I do not like the functionality to 100%. And this is not about React. Maybe take DraftJS by Facebook? Sorry, forgotten. Inspired by them, SlateJS wins comparatively in the moment. But SlateJS is a plugin designer. There should be ready assemblies based on it. Under the spoiler is a long list of some pros and cons of some.

Well, you have to make your own, very best build on SlateJS. Then habr.com will fasten it to itself. Think again, why do you need VueJS (joke). So, first you need a composition of controls for managing the editor: to add new blocks, to control the selected block, to change the block settings, to format the selected text. I rewrote several times, it seemed to settle, while I like it. Ant-Design based controls. Published by slate-controls npm-package. Do not judge strictly - this is your favorite child.

Sources of the future project .