From faee12137fc822c22a23a898f9aec15cf4547dbf Mon Sep 17 00:00:00 2001 From: Artem Zakharchenko Date: Fri, 30 Jun 2017 10:24:03 +0200 Subject: [PATCH] Create README.md --- README.md | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..3946749 --- /dev/null +++ b/README.md @@ -0,0 +1,103 @@ +# Naming cheatsheet +Naming things is hard. Is it? + +## Guidelines +* All namings should follow **one** agreed convention. Whether it is `likeThis`, or `like_this`, or anyhow else, it does not matter. Pick one and follow it. +* Name, whether of a variable, method, or something else, should be *short*, *descriptive* and *intuitive* + * **Short**. Variable should not take long to type, and therefore to remember, + * **Descriptive**. Name of the variable should reflect what this variable possesses/does in the most efficient way, + * **Intuitive**. Name of the variable should read naturally, as close to common speach as possible +```js +/* Bad namings */ +const a = 5; // "a" could mean anything +const isPaginatable = (a > 10); // "Paginatable" sounds extremily unnatural + +/* Good namings */ +const postsCount = 5; +const shouldDisplayPagination = (postsCount > 10); +``` +* Name should not duplicate the context when the latter is known and when removing the context from name does not decrease the redability: +```js +class MenuItem { + /* Method name duplicates the context it is in "...MenuItem..." */ + handleMenuItemClick = (event) => { ... } + + /* This way it reads as MenuItem.handleClick() */ + handleClick = (event) => { ... } +} +``` + +## Methods +**Pattern:** +``` +prefix? + action + high context (HC) + low context (LC) +``` + +### Actions +#### `get` +Access data immediately (i.e. shorthand getter of internal data). +```js +function getFruitsCount() { + return this.fruits; +} +``` +#### `fetch` +Request for variable/data, which takes time (i.e. async request). +```js +function fetchPosts(postCount) { + return fetch('https://api.dev/posts', { ... }); +} +``` +#### `set` +Declaratively set `variableA` to next value `valueB`. +```js +function Component() { + this.state = { fruits: 0 }; + + function setFruits(nextFruits) { + this.state.fruits = nextFruits; + } +} +``` +#### `reset` +Set something to its initial state/value. +```js +const initialFruits = 5; +const fruits = initialFruits; +setFruits(10); // fruits = 10 + +function resetFruits() { + fruits = initialFruits; +} + +resetFruits(); // fruits = 5 +``` +#### `compose` +Create new data from existing one. +```js +function composePageUrl(pageName, pageId) { + return `${pageName.toLowerCase()}-${pageId}`; +} +``` + +#### `handle` +Handler for a dedicated action. Usually, used as a callback method. +```js +function handleLinkClick(event) { + event.preventDefault(); + console.log('Clicked a link!'); +} + +link.addEventListener('click', handleLinkClick); +``` + +### Prefixes +#### `should` +Prompting computation usually returninng `Boolean` value. +```js +const currentUrl = 'https://dev.com'; + +function shouldUpdateUrl(url) { + return (url !== currentUrl); +} +```