quiblications

[quiblications]

Mistake #28

Didn't install package globally.

When command not found: yarn Use npm install -g yarn

Possible other methods:

brew install yarn brew tap yarn

[quiblications]

Mistake #27

Exposed changing data that re-rendered the whole component.

Use React.ReactNode to encapsulate complicated or changing logic in simple components.

For instance: When implementing a countdown timer in MyComponent.

DON'T const MyComponent = (props) => { const time = useTimer(clock); <Modal content={'${time} left'} /> };

DO const MyComponent = (props) => { <Modal content={<Timer time={clock} />} }; const Timer = (clock: string): React.ReactNode => { const time = useTimer(clock); return '${time} left'; };

Time state updates are isolated to the Timer component and keeps the MyComponent component from unnecessarily re-rendering.

[quiblications]

Clean Code Tip

Try to use ?? before using ||.

The OR operator || uses the right value if left is falsy, while the nullish coalescing operator ?? uses the right value if left is null or undefined.

[quiblications]

Clean Code Tip

When using react-redux, use 'useDispatch' instead of using 'useStore' and then only using the dispatch action.

Instead of:

const store = useStore(); <button onClick={ () => store.dispatch(closeToastAction()) }>

Do:

const dispatch = useDispatch(); <button onClick={ () => dispatch(closeToastAction()) }>

[quiblications]

Good Design Tip

Always have UX for a null state.

const myComponent = (props) => {

   if (!props.data) {         return <Loader />    }    return <Component data={props.data} />

}

[quiblications]

Clean Code Tip

Always check validity of inputs before using them.

function (myInput) {

    if (!myInput) {          return;     }     // use myInput

}

[quiblications]

Clean Code Tip

How to use reduce: https://www.freecodecamp.org/news/reduce-f47a7da511a9/

isDirty: computed(function () {       // Have an array of values that need to be reduced (i.e. langs)       const langs = this.ouContext.getLangs().map((value) => value.langId);       const fullfilledForm = langs.reduce((acc, lang) => {             // Have a condition that affects each value (i.e. somePropsAreEmpty)             const reqFields = pick(get(this.model, `contentLang.${lang}`),                   ['title','description','question']             );             const formProps = Object.values(reqFields);             const somePropsAreEmpty =                   formProps.length < 3 || formProps.some((prop) => isEmpty(prop));

            // Return modified array accordingly             if (somePropsAreEmpty) {                          return acc;             }             return [...acc, lang];       }, []);       return isEmpty(fullfilledForm); }),

[quiblications]

Mistake #26

Not using `readonly` when also using `onChange`.

For instance:

`<input type=“number” value={{value}}>` returns a value of type string.

Whereas:

`<input type=“number” value={{readonly value}} input={{action "onChange" value="target.value"}}>` actions: {      onChange(value) {          return parseInt(value);      } } returns a value of type integer.

[quiblications]

Clean Code Tip

Separate out any single action that uses more than eight lines of logic as its own function (using a  _whatItDoes as naming convention).

MONOLITHIC

init() {      this._super(...arguments);           // create default model     lots of logic     // uses a schema     lots of logic }

MICRO

init() {      this._super(...arguments);      _createDefault();      _applySchema(); }, _createDefault() {      lots of logic }, _applySchema(){      lots of logic }

[quiblications]

Mistake #25

Tried to create a property that already exists.

If the error message says it requires the ‘set()’ function when you try to `myObj.key = value`, it’s probably because that { key: value } pair already exists and you can only modify it with ‘set()’.

[quiblications]

Mistake #24

Didn’t implement any error handling.

Always use `try {} catch {}` or `.then.catch`

[quiblications]

Mistake #23

Tried to make API calls without my server running.

[quiblications]

Mistake #22

Tried to test new code with outdated data.

Hint: `yarn popDB` to remove old data changes that might conflict with what the new code expects.

[quiblications]

Mistake #21

Didn’t check from where I was calling variables in my template.hbs.

In the newer versions of Ember, {{@variable}} is for variables passed into the component as properties whereas {{this.variable}} is for variables computed in the component.js.

[quiblications]

Mistake #20

Mutated a computed property.

If you ‘this.set’ a computed property, it will stop observing property changes. Watch for components that mutate internally, like the Ember `textarea` component.

[quiblications]

Mistake #19

Had the wrong node module. Error: Found incompatible module

1. If I don’t have nvm: brew install nvm

2. Install the expected version: nvm install 12.18.4

3. Set the correct version: nvm use 12.18.4

[quiblications]

Mistake #18

Didn’t check my syntax.

expect(letter.to.be.oneOf(['A', 'B']));

                                                            ^ parantheses was at the end

expect(letter).to.be.oneOf(['A', 'B']);

                      ^ when it should have been here