Preparing to take over the world

  • Tutorial

The question is, what is my project about? I don’t know. Plans are changing. There are a lot of ideas. But there is always a common basic functionality. So far, I’m talking about this. Already 5 months. After the spring exacerbation, in a fit of loneliness, I want to share some of the best practices.


Spring Fever


The first step was to deploy the Create React App. It will have to be finalized with a file. It has long been possible to get around the scary eject command with react-app-rewired. Sinful, config-overrides.js is completely mine; It turned out clumsily, I want to rewrite it on functional lenses. But everything works: yarn workspaces, babel-plugins, less-loader (for customization of Ant-Design), absolute import paths.


Prettier configured in such a way that the project has one config for both VSCode and commits (.prettierrc is at the root). At some point, lint-staged stopped satisfying, I don’t remember why. Pretty-quick came to replace it (for how to connect, see package.json). And it was very annoying that prettier reformatted the service json files. Added exceptions to .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 node + npm bundle, in my case "stable". Enough to do $ nvm useto switch the environment. Very comfortably.


Lerna once seemed like a scary monster. As a result, I use explicitly just one command $ lerna publish. Packages in my mono-repository are published on npmjs.com with an update of their own version, which you select in the interactive mode. In combination with yarn workspaces, it is possible to decompose the project into packages and develop them at the same time (hot-reload works for all code). The practical embodiment of connectedness and connectedness. Google if you do not know what it is; helps a lot to manage code complexity. He also screwed rollup to build packages, and it uses the general typescript settings of the mono-repository host application.


About Ant-Design. It is amazing how many managers and developers do not understand the benefits of building a house out of finished bricks, and rush to produce their own bricks. Is it really necessary to reinvent the modal window implementation? Learning to customize and compose is a reapplied practice; this is the next level of abstraction in building up technological complexity. Just need to slightly change the approach to design, given the restrictions. Have to dance from the 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 less-loader there is an option modifyVars. To reuse the same theme.js in NodeJS and ES, used esm: const requireForES = require('esm')(module /*, options*/). But many variables are derivatives of others, for example @primary-color: @blue-6. Proxy has helped to theme object fields: primaryColor: (theme) => theme.blue6; if the field in theme is a function, then call the function, and so recursively to the next field, until we get to the field with the final value. And there are less-mixins - this is js-code packed in less; for example, I copied the colorPalette: function back to javascript primaryColor5: (theme) => colorPalette(theme.primaryColor, 5). Sources theme.js .


Oh, I ate a dog on styled-components. But you should not waste time on stories, because the release of reshadow is nearing (I really want to believe). A very inspiring presentation at React Russia 2019. In anticipation of the holiday, this will be a different level of development convenience. In the meantime, only about one general point, I turned on VSCode in the settings "editor.foldingStrategy": "indentation"to normally collapse the css code inside the template string. Annoyed that the editor does not remember minimized. It would be necessary to look for a 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 digital code for the login comes by letter, or SMS (free), or a message on WhatsApp. He wrote his wrapper on top of the API while he lives inside the project as a react component. It works great. Now I want to put it into an 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. Yes, inside the markdown format, you can add HTML inserts, but this is not an editor for the mass consumer, but for hackers. The output is a block editor. And for the blocks you need to store meta data. For example, a picture gallery widget - a couple of mouse clicks and you're done. And I also want to rearrange the blocks, also with the mouse. Like koenig-editor inside Ghost and still domestic EditorJS. It is clear that medium.com is the progenitor. But I am not happy with the functionality to 100%. And this is not about React. Can take DraftJS by Facebook? Sorry, thrown up. SlateJS inspired by him comparatively wins the moment. But SlateJS is a plugin constructor. There should be ready-made assemblies based on it. Under the spoiler is a long list of the pros and cons of some.


Hidden text

canner-slate-editor
[+] does not show the Hovering Menu when a mouse selects a title, or text inside a block with a code
[-] when a drag'n'drop operation is completed for a picture, an un-drawn cursor
[+] plus sign with a context menu is observed when the cursor is in an empty line outside the code block (as in Ghost, but there’s a plus sign when you bring the mouse to the end of the text)
[+] a plus sign with a context menu appears at the end of the line (but if the line is decorated like "H2", then the plus sign is no longer appears - this is not a bug, but a feature)
[+] animation of a plus sign with a context menu (there is no such thing in Ghost); and the plus sign turns into a cross when the menu is open
[-] in the context menu there are buttons for formatting the text (in Ghost there are only widgets)
[+] application of antd components for tools inside the editor
[+] rich functionality for uploading images: drag'n'drop, url, open file
[-] images can be downloaded only one at a time (no gallery widget)
[+] there are image alignments and other blocks
[+] editing the image size (but it would be easier, as in Ghost regular-white-full modes)
[+] markdown
[-] formatting is not used drag'n'drop for cards (in Ghost terminology)
[+] widget table, as in the good old a Word the MS
[-] only the video can be inserted on the URL (in the Ghost is a widget "other ...", which is supported by many other - "embedded is content")
[-] idzhet links does not allow it to edit (in Ghost is possible)
[-] Hovering Menu and url-popup links pop up at the same time (in Ghost text selection hides url-popup links)
[-] Hovering Menu crawls over the edge of the edited area (in Ghost it aligns itself to the edge)


react-page (ory-editor)
[+] mode for changing the composition of blocks via drag'n'drop
[+] mode for resizing images and other blocks if there are several of them in the same row (but only via drag'n'drop)
[+ ] the mode of adding widgets (but only via drag'n'drop)
[+] the "preview result" mode changes the behavior of widgets (for example: the picture becomes clickable)
[+] in the mode of changing the composition of blocks, a block with a picture can be inserted into a block with text through drag'n'drop - so that the text frames the picture; plus there is a "protection against a fool": so you can insert only one picture
[-] without a mouse the functionality is very limited
[-] there is no stretching the size of the pictures (as in Ghost regular-white-full modes)
[-] there is no markdown formatting at all (in Ghost there are two modes: in the text, in a separate widget)
[-] it’s not obvious how to remove a picture block (you need to drag it to the basket via drag'n'drop) - you need to move the basket icon outside the text
[-] there is no focus frame for the picture widget in the property editing mode (although there is an HTML5 video widget, the browser itself probably sets the focus indication)
[+] toolbar for editing the current element (toolbar for text, or a dialog for the picture etc.) pops up in the basement and pinned there
[-] the mode of adding widgets returns to the initial state of the selection of widgets after inserting any widget, but I would like to proceed to editing the added widget; this is probably what was intended: first, throw blocks, and then edit them one by one
[-] the url of the link is stupidly deleted when the button is clicked, but I would like to popup with the url of the link and the link editing dialog (there is no editing in Ghost, only an empty field input for a new link); it is clear that trade-offs due to a possible conflict of adding a link to a link should be worked out; in sanity, one dialog serves to edit the link (and its display) and to click on this link
[-] in the image editing tool there is no drag'n'drop to add the original image
[-] no widget for code
[-] drag'n'drop is not implemented for uploading images
[-] the system file selection dialog for uploading images does not filter valid files (only images need to be displayed)
[-] in Ghost, in drag'n'drop mode, others are animated elements for the indicator strip where drop
[-] will be executed in the mode of changing the composition of blocks via drag'n'drop, the parasitic indicator strip is duplicated (apparently due to extra div elements)


netlify-cms-widget-markdown
[+] you can watch how to get married slate and remark (remarkSlate.js, slateRemark.js)
[+] plugins built-in slate-edit-list and slate-edit-table
[+] two editor implementations: RawEditor & VisualEditor


sanity
[+] crop selection for pictures (see attachment) - does not apply to slate-js
[+] paste markdown (?)


Okay, I’ll have to tinker with my very, very best build on SlateJS. Then habr.com will screw it on itself. Think about why you need VueJS (joke). So, first you need a composition of controls to control the editor: to add new blocks, to control the selected block, to change the block settings, to format the selected text. I copied several times, it seems to have settled, while I like it. Controls based on Ant-Design. Published npm package slate-controls. Do not judge strictly - this is a beloved child.


Stylish pictures on the phone




Sources of the future project .


Also popular now: