├── articles-chinese └── README.md ├── codetidbits30-2018 ├── 1.png ├── 10.png ├── 11.png ├── 12.png ├── 13.png ├── 14.png ├── 15.png ├── 16.png ├── 17.png ├── 18.png ├── 19.png ├── 2.png ├── 20.png ├── 21.png ├── 22.png ├── 23.png ├── 27.png ├── 28.png ├── 29.png ├── 3.png ├── 30.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── 9.png ├── 25-christmas.png ├── 26-boxing-day.png └── 24-christmas-eve.png ├── images ├── 2-console-table.png ├── 53-css-counter.png ├── 77-html-kbd-tag.png ├── 23-no-else-return.png ├── 64-css-only-child.png ├── 21-how-to-test-nan.png ├── 27-css-user-select.mp4 ├── 31-css-caret-color.png ├── 41-no-useless-escape.png ├── 42-html5-autofocus.png ├── 46-css-not-selector.png ├── 43-black-friday-while.png ├── 45-pretty-json-output.png ├── 72-css-empty-selector.png ├── 73-es6-endswith-method.png ├── 1-convert-to-true-array.png ├── 17-print-ranges-natively.png ├── 32-html-contenteditable.mp4 ├── 32-html-contenteditable.png ├── 39-halloween-es6-classes.png ├── 4-declaring-css-variables.png ├── 49-2-ways-to-merge-arrays.png ├── 5-concise-method-syntax.png ├── 55-how-to-truncate-number.png ├── 67-es6-startswith-method.png ├── 22-2-ways-to-repeat-strings.png ├── 33-how-to-compare-2-objects.png ├── 38-html-download-attribute.jpg ├── 40-colorful-console-message.png ├── 54-debug-using-or-operator.png ├── 57-styling-css-placeholder.png ├── 59-exponentiation-operator.png ├── 65-dot-vs-bracket-notation.png ├── 66-no-and-in-function-name.png ├── 70-3-ways-to-clone-objects.png ├── 74-how-to-reverse-an-array.png ├── 11-setting-default-parameters.png ├── 12-split-string-using-spread.png ├── 15-4-ways-to-combine-strings.png ├── 16-royal-wedding-default-param.png ├── 25-js-essentials-falsy-values.png ├── 35-es6-way-to-clone-an-array.png ├── 36-bad-variable-names-to-avoid.png ├── 47-arrow-functions-cheatsheet.png ├── 50-how-to-deep-clone-an-array.png ├── 52-3-ways-to-set-default-value.png ├── 56-how-to-get-an-object-length.png ├── 6-custom-css-selection-styling.gif ├── 6-custom-css-selection-styling.mp4 ├── 68-strike-through-using-html.png ├── 76-converting-object-to-array.png ├── 13-skip-values-in-destructuring.png ├── 19-3-ways-to-convert-to-boolean.png ├── 30-how-to-format-currency-in-es6.png ├── 34-better-boolean-variable-names.png ├── 70-3-ways-to-clone-objects-blog.png ├── 9-trick-to-add-string-and-number.png ├── 3-when-not-to-use-arrow-functions.png ├── 37-dynamic-property-name-with-es6.png ├── 7-create-object-with-dynamic-keys.png ├── 75-centering-elements-with-flexbox.png ├── 78-iterables-to-array-using-spread.png ├── 8-swap-variables-with-destructuring.png ├── 10-remove-array-duplicates-using-set.png ├── 28-check-if-string-contains-substring.png ├── 43-3-ways-to-remove-array-duplicates.png ├── 60-highlight-text-with-html-mark-tag.png ├── 62-5-ways-to-convert-value-to-string.png ├── 14-combine-multiple-arrays-using-spread.png ├── 48-passing-arrays-as-function-arguments.png ├── 63-better-array-check-with-array-isarray.png ├── 71-how-to-flatten-array-using-array-flat.png ├── 18-named-param-using-destructured-objects.png ├── 61-better-nan-check-with-es6-number-isnan.png ├── 20-extract-arguments-using-array-destructure.png ├── 58-multi-line-strings-with-template-literals.png ├── 69-display-string-in-tabular-format-with-padend.png ├── 54-quick-debug-wth-console-log-using-or-operator.png ├── 44-refactoring-conditional-adding-property-to-object.png ├── 24-prevent-error-with-default-object-when-destructuring.png └── 51-prevent-object-retrieval-type-error-with-guard-operator.png ├── articles ├── 5-concise-method-syntax.md ├── 8-swap-variables-with-destructuring.md ├── 7-create-object-with-dynamic-keys.md ├── 1-convert-to-true-array.md ├── 3-when-not-to-use-arrow-functions.md ├── 6-custom-css-selection-styling.md ├── 11-setting-default-parameters.md ├── 4-declaring-css-variables.md ├── 14-combine-multiple-arrays-using-spread.md ├── 9-trick-to-add-string-and-number.md ├── 2-console-table.md ├── 15-4-ways-to-combine-strings.md ├── 10-remove-array-duplicates-using-set.md ├── 27-css-user-select.md ├── 75-centering-elements-with-flexbox.md ├── 37-dynamic-property-name-with-es6.md ├── 13-skip-values-in-destructuring.md ├── 28-check-if-string-contains-substring.md ├── 29-check-if-number-is-positive-or-negative.md ├── 20-extract-arguments-using-array-destructure.md ├── 41-no-useless-escape.md ├── 36-bad-variable-names-to-avoid.md ├── 16-royal-wedding-default-param.md ├── 18-named-param-using-destructured-objects.md ├── 32-html-contenteditable.md ├── 59-exponentiation-operator.md ├── 12-split-string-using-spread.md ├── 19-3-ways-to-convert-to-boolean.md ├── 31-css-caret-color.md ├── 42-html5-autofocus.md ├── 22-2-ways-to-repeat-strings.md ├── 39-halloween-es6-classes.md ├── 74-how-to-reverse-an-array.md ├── 54-quick-debug-wth-console-log-using-or-operator.md ├── 26-refactoring-if-condition.md ├── 25-js-essentials-falsy-values.md ├── 45-pretty-json-output.md ├── 30-how-to-format-currency-in-es6.md ├── 38-html-download-attribute.md ├── 17-print-ranges-natively.md ├── 47-arrow-functions-cheatsheet.md ├── 24-prevent-error-with-default-object-when-destructuring.md ├── 77-html-kbd-tag.md ├── 44-refactoring-conditional-adding-property-to-object.md ├── 58-multi-line-strings-with-template-literals.md ├── 33-how-to-compare-2-objects.md ├── 35-es6-way-to-clone-an-array.md ├── 48-passing-arrays-as-function-arguments.md ├── 34-better-boolean-variable-names.md ├── 71-how-to-flatten-array-using-array-flat.md ├── 55-how-to-truncate-number.md ├── 21-how-to-test-nan.md ├── 40-colorful-console-message.md ├── 78-iterables-to-array-using-spread.md ├── 69-display-string-in-tabular-format-with-padend.md ├── 76-converting-object-to-array.md ├── 66-no-and-in-function-name.md ├── 46-css-not-selector.md └── 51-prevent-object-retrieval-type-error-with-guard-operator.md ├── articles-portugues ├── 5-sintaxa-metodo-conciso.md ├── 1-convertendo-um-array-like-para-um-array.md ├── 3-quando-nao-usar-arrow-function.md ├── README.md ├── 4-declarando-variaveis-css.md └── 2-console-table.md ├── .gitignore ├── translation_contribution_guide.md └── README.md /articles-chinese/README.md: -------------------------------------------------------------------------------- 1 | Coming soon... 2 | -------------------------------------------------------------------------------- /codetidbits30-2018/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/1.png -------------------------------------------------------------------------------- /codetidbits30-2018/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/10.png -------------------------------------------------------------------------------- /codetidbits30-2018/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/11.png -------------------------------------------------------------------------------- /codetidbits30-2018/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/12.png -------------------------------------------------------------------------------- /codetidbits30-2018/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/13.png -------------------------------------------------------------------------------- /codetidbits30-2018/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/14.png -------------------------------------------------------------------------------- /codetidbits30-2018/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/15.png -------------------------------------------------------------------------------- /codetidbits30-2018/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/16.png -------------------------------------------------------------------------------- /codetidbits30-2018/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/17.png -------------------------------------------------------------------------------- /codetidbits30-2018/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/18.png -------------------------------------------------------------------------------- /codetidbits30-2018/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/19.png -------------------------------------------------------------------------------- /codetidbits30-2018/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/2.png -------------------------------------------------------------------------------- /codetidbits30-2018/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/20.png -------------------------------------------------------------------------------- /codetidbits30-2018/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/21.png -------------------------------------------------------------------------------- /codetidbits30-2018/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/22.png -------------------------------------------------------------------------------- /codetidbits30-2018/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/23.png -------------------------------------------------------------------------------- /codetidbits30-2018/27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/27.png -------------------------------------------------------------------------------- /codetidbits30-2018/28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/28.png -------------------------------------------------------------------------------- /codetidbits30-2018/29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/29.png -------------------------------------------------------------------------------- /codetidbits30-2018/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/3.png -------------------------------------------------------------------------------- /codetidbits30-2018/30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/30.png -------------------------------------------------------------------------------- /codetidbits30-2018/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/4.png -------------------------------------------------------------------------------- /codetidbits30-2018/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/5.png -------------------------------------------------------------------------------- /codetidbits30-2018/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/6.png -------------------------------------------------------------------------------- /codetidbits30-2018/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/7.png -------------------------------------------------------------------------------- /codetidbits30-2018/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/8.png -------------------------------------------------------------------------------- /codetidbits30-2018/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/9.png -------------------------------------------------------------------------------- /images/2-console-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/2-console-table.png -------------------------------------------------------------------------------- /images/53-css-counter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/53-css-counter.png -------------------------------------------------------------------------------- /images/77-html-kbd-tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/77-html-kbd-tag.png -------------------------------------------------------------------------------- /images/23-no-else-return.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/23-no-else-return.png -------------------------------------------------------------------------------- /images/64-css-only-child.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/64-css-only-child.png -------------------------------------------------------------------------------- /images/21-how-to-test-nan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/21-how-to-test-nan.png -------------------------------------------------------------------------------- /images/27-css-user-select.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/27-css-user-select.mp4 -------------------------------------------------------------------------------- /images/31-css-caret-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/31-css-caret-color.png -------------------------------------------------------------------------------- /images/41-no-useless-escape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/41-no-useless-escape.png -------------------------------------------------------------------------------- /images/42-html5-autofocus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/42-html5-autofocus.png -------------------------------------------------------------------------------- /images/46-css-not-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/46-css-not-selector.png -------------------------------------------------------------------------------- /images/43-black-friday-while.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/43-black-friday-while.png -------------------------------------------------------------------------------- /images/45-pretty-json-output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/45-pretty-json-output.png -------------------------------------------------------------------------------- /images/72-css-empty-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/72-css-empty-selector.png -------------------------------------------------------------------------------- /images/73-es6-endswith-method.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/73-es6-endswith-method.png -------------------------------------------------------------------------------- /codetidbits30-2018/25-christmas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/25-christmas.png -------------------------------------------------------------------------------- /codetidbits30-2018/26-boxing-day.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/26-boxing-day.png -------------------------------------------------------------------------------- /images/1-convert-to-true-array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/1-convert-to-true-array.png -------------------------------------------------------------------------------- /images/17-print-ranges-natively.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/17-print-ranges-natively.png -------------------------------------------------------------------------------- /images/32-html-contenteditable.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/32-html-contenteditable.mp4 -------------------------------------------------------------------------------- /images/32-html-contenteditable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/32-html-contenteditable.png -------------------------------------------------------------------------------- /images/39-halloween-es6-classes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/39-halloween-es6-classes.png -------------------------------------------------------------------------------- /images/4-declaring-css-variables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/4-declaring-css-variables.png -------------------------------------------------------------------------------- /images/49-2-ways-to-merge-arrays.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/49-2-ways-to-merge-arrays.png -------------------------------------------------------------------------------- /images/5-concise-method-syntax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/5-concise-method-syntax.png -------------------------------------------------------------------------------- /images/55-how-to-truncate-number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/55-how-to-truncate-number.png -------------------------------------------------------------------------------- /images/67-es6-startswith-method.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/67-es6-startswith-method.png -------------------------------------------------------------------------------- /images/22-2-ways-to-repeat-strings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/22-2-ways-to-repeat-strings.png -------------------------------------------------------------------------------- /images/33-how-to-compare-2-objects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/33-how-to-compare-2-objects.png -------------------------------------------------------------------------------- /images/38-html-download-attribute.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/38-html-download-attribute.jpg -------------------------------------------------------------------------------- /images/40-colorful-console-message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/40-colorful-console-message.png -------------------------------------------------------------------------------- /images/54-debug-using-or-operator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/54-debug-using-or-operator.png -------------------------------------------------------------------------------- /images/57-styling-css-placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/57-styling-css-placeholder.png -------------------------------------------------------------------------------- /images/59-exponentiation-operator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/59-exponentiation-operator.png -------------------------------------------------------------------------------- /images/65-dot-vs-bracket-notation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/65-dot-vs-bracket-notation.png -------------------------------------------------------------------------------- /images/66-no-and-in-function-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/66-no-and-in-function-name.png -------------------------------------------------------------------------------- /images/70-3-ways-to-clone-objects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/70-3-ways-to-clone-objects.png -------------------------------------------------------------------------------- /images/74-how-to-reverse-an-array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/74-how-to-reverse-an-array.png -------------------------------------------------------------------------------- /codetidbits30-2018/24-christmas-eve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/codetidbits30-2018/24-christmas-eve.png -------------------------------------------------------------------------------- /images/11-setting-default-parameters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/11-setting-default-parameters.png -------------------------------------------------------------------------------- /images/12-split-string-using-spread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/12-split-string-using-spread.png -------------------------------------------------------------------------------- /images/15-4-ways-to-combine-strings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/15-4-ways-to-combine-strings.png -------------------------------------------------------------------------------- /images/16-royal-wedding-default-param.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/16-royal-wedding-default-param.png -------------------------------------------------------------------------------- /images/25-js-essentials-falsy-values.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/25-js-essentials-falsy-values.png -------------------------------------------------------------------------------- /images/35-es6-way-to-clone-an-array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/35-es6-way-to-clone-an-array.png -------------------------------------------------------------------------------- /images/36-bad-variable-names-to-avoid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/36-bad-variable-names-to-avoid.png -------------------------------------------------------------------------------- /images/47-arrow-functions-cheatsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/47-arrow-functions-cheatsheet.png -------------------------------------------------------------------------------- /images/50-how-to-deep-clone-an-array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/50-how-to-deep-clone-an-array.png -------------------------------------------------------------------------------- /images/52-3-ways-to-set-default-value.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/52-3-ways-to-set-default-value.png -------------------------------------------------------------------------------- /images/56-how-to-get-an-object-length.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/56-how-to-get-an-object-length.png -------------------------------------------------------------------------------- /images/6-custom-css-selection-styling.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/6-custom-css-selection-styling.gif -------------------------------------------------------------------------------- /images/6-custom-css-selection-styling.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/6-custom-css-selection-styling.mp4 -------------------------------------------------------------------------------- /images/68-strike-through-using-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/68-strike-through-using-html.png -------------------------------------------------------------------------------- /images/76-converting-object-to-array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/76-converting-object-to-array.png -------------------------------------------------------------------------------- /images/13-skip-values-in-destructuring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/13-skip-values-in-destructuring.png -------------------------------------------------------------------------------- /images/19-3-ways-to-convert-to-boolean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/19-3-ways-to-convert-to-boolean.png -------------------------------------------------------------------------------- /images/30-how-to-format-currency-in-es6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/30-how-to-format-currency-in-es6.png -------------------------------------------------------------------------------- /images/34-better-boolean-variable-names.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/34-better-boolean-variable-names.png -------------------------------------------------------------------------------- /images/70-3-ways-to-clone-objects-blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/70-3-ways-to-clone-objects-blog.png -------------------------------------------------------------------------------- /images/9-trick-to-add-string-and-number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/9-trick-to-add-string-and-number.png -------------------------------------------------------------------------------- /images/3-when-not-to-use-arrow-functions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/3-when-not-to-use-arrow-functions.png -------------------------------------------------------------------------------- /images/37-dynamic-property-name-with-es6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/37-dynamic-property-name-with-es6.png -------------------------------------------------------------------------------- /images/7-create-object-with-dynamic-keys.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/7-create-object-with-dynamic-keys.png -------------------------------------------------------------------------------- /images/75-centering-elements-with-flexbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/75-centering-elements-with-flexbox.png -------------------------------------------------------------------------------- /images/78-iterables-to-array-using-spread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/78-iterables-to-array-using-spread.png -------------------------------------------------------------------------------- /images/8-swap-variables-with-destructuring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/8-swap-variables-with-destructuring.png -------------------------------------------------------------------------------- /images/10-remove-array-duplicates-using-set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/10-remove-array-duplicates-using-set.png -------------------------------------------------------------------------------- /images/28-check-if-string-contains-substring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/28-check-if-string-contains-substring.png -------------------------------------------------------------------------------- /images/43-3-ways-to-remove-array-duplicates.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/43-3-ways-to-remove-array-duplicates.png -------------------------------------------------------------------------------- /images/60-highlight-text-with-html-mark-tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/60-highlight-text-with-html-mark-tag.png -------------------------------------------------------------------------------- /images/62-5-ways-to-convert-value-to-string.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/62-5-ways-to-convert-value-to-string.png -------------------------------------------------------------------------------- /images/14-combine-multiple-arrays-using-spread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/14-combine-multiple-arrays-using-spread.png -------------------------------------------------------------------------------- /images/48-passing-arrays-as-function-arguments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/48-passing-arrays-as-function-arguments.png -------------------------------------------------------------------------------- /images/63-better-array-check-with-array-isarray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/63-better-array-check-with-array-isarray.png -------------------------------------------------------------------------------- /images/71-how-to-flatten-array-using-array-flat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/71-how-to-flatten-array-using-array-flat.png -------------------------------------------------------------------------------- /images/18-named-param-using-destructured-objects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/18-named-param-using-destructured-objects.png -------------------------------------------------------------------------------- /images/61-better-nan-check-with-es6-number-isnan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/61-better-nan-check-with-es6-number-isnan.png -------------------------------------------------------------------------------- /images/20-extract-arguments-using-array-destructure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/20-extract-arguments-using-array-destructure.png -------------------------------------------------------------------------------- /images/58-multi-line-strings-with-template-literals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/58-multi-line-strings-with-template-literals.png -------------------------------------------------------------------------------- /images/69-display-string-in-tabular-format-with-padend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/69-display-string-in-tabular-format-with-padend.png -------------------------------------------------------------------------------- /images/54-quick-debug-wth-console-log-using-or-operator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/54-quick-debug-wth-console-log-using-or-operator.png -------------------------------------------------------------------------------- /images/44-refactoring-conditional-adding-property-to-object.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/44-refactoring-conditional-adding-property-to-object.png -------------------------------------------------------------------------------- /images/24-prevent-error-with-default-object-when-destructuring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/24-prevent-error-with-default-object-when-destructuring.png -------------------------------------------------------------------------------- /images/51-prevent-object-retrieval-type-error-with-guard-operator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/code-tidbits/HEAD/images/51-prevent-object-retrieval-type-error-with-guard-operator.png -------------------------------------------------------------------------------- /articles/5-concise-method-syntax.md: -------------------------------------------------------------------------------- 1 | # ES6 Shorthand to Define Methods in Objects 2 | 3 | Awesome JS tip that helps you type less! 👍 4 | 5 | Use ES6’s concise method syntax to define methods in your objects. 6 | 7 | ```javascript 8 | const Rain = { 9 | // bringUmbrella: function() {} 10 | 11 | bringUmbrella() { 12 | return '☔️' 13 | } 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /articles-portugues/5-sintaxa-metodo-conciso.md: -------------------------------------------------------------------------------- 1 | Translated by [@Mathias54](https://github.com/Mathias54) 2 | 3 | # Forma Rápido de Definir Métodos em Objetos ES6 4 | 5 | Essa dica incrível de JS ajuda você a escrever menos! 👍 6 | 7 | Use a sintaxe "Concise Methods" para definir métodos em seus objetos. 8 | 9 | ```javascript 10 | const Chuva = { 11 | // levarGuardaChuva: function() {} 12 | 13 | levarGuardaChuva() { 14 | return '☔️' 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /articles/8-swap-variables-with-destructuring.md: -------------------------------------------------------------------------------- 1 | # Swapping Variables With Destructuring 2 | 3 | ES6 Destructuring to the rescue 🏆 4 | 5 | Easily swap two variables using ES6 destructing. It’s a great way to fix #Oscars Best Picture mix-ups 😜 6 | 7 | 8 | ```javascript 9 | let oscar = 'La La Land'; 10 | let nominee = 'Moonlight'; 11 | 12 | [oscar, nominee] = [nominee, oscar]; 13 | 14 | console.log(oscar) // Moonlight 15 | console.log(nominee) // La La Land 16 | ``` 17 | -------------------------------------------------------------------------------- /articles/7-create-object-with-dynamic-keys.md: -------------------------------------------------------------------------------- 1 | # ES6 Way of Creating Object with Dynamic Keys 2 | 3 | Easier way to create objects with dynamic keys 💪 4 | 5 | Previously, we always had to use the bracket notation to use a dynamic key. With ES6, we can finally create dynamic variable key in the object declaration. Woohoo! 🤩 6 | 7 | 8 | ```javascript 9 | var key = '🔑'; 10 | 11 | // Old Way 12 | var lock = {}; 13 | lock[key] = 'unlock'; 14 | 15 | // New Way 16 | var lock = { 17 | [key]: 'unlock'; 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /articles/1-convert-to-true-array.md: -------------------------------------------------------------------------------- 1 | # Convert Array-like to True Array 2 | 3 | This is cool! Learning something new [@wesbos](https://twitter.com/wesbos) ES6 course 🔥 4 | 5 | 6 | ```javascript 7 | const nodeList = document.querySelectorAll('ul li'); 8 | 9 | // Method 1: Convert to true Array 10 | Array.from(nodeList); 11 | 12 | // Method 2: Convert to true Array 13 | [...nodeList]; 14 | 15 | // Now you can use map and other methods to loop 16 | ``` 17 | 18 | ## Resources 19 | 20 | - https://github.com/wesbos/es6-articles/blob/master/25%20-%20Array.from()%20and%20Array.of().md 21 | -------------------------------------------------------------------------------- /articles/3-when-not-to-use-arrow-functions.md: -------------------------------------------------------------------------------- 1 | # When NOT to use Arrow Functions 2 | 3 | Arrow functions are terrific, but not suitable for all situations. Avoid them in objects because 'this' is always scoped to the parent -- which is the 'window' in this case. 4 | 5 | ```javascript 6 | const burger = { 7 | type: '🍔', 8 | eat: () => { // should use function() instead 9 | console.log(this) // 'this' is window, not burger 10 | } 11 | }; 12 | 13 | // Avoid Arrow Functions in Objects 14 | ``` 15 | 16 | ## Resources 17 | 18 | - https://wesbos.com/arrow-function-no-no/ 19 | -------------------------------------------------------------------------------- /articles/6-custom-css-selection-styling.md: -------------------------------------------------------------------------------- 1 | 2 | # Custom CSS Selection Styling 3 | 4 | Custom Selection Styling is fun! 🎉 5 | 6 | The ::selection CSS pseudo-element allows you to apply styles to your text when it’s highlighted. It's a great way to add some pizzaz to your site 💃 7 | 8 | 9 | ```css 10 | p::selection { 11 | background: DeepPink; 12 | color: white; 13 | } 14 | ``` 15 | 16 | For Firefox, you will need to use ::-moz-selection 👍 17 | 18 | ```css 19 | p::-moz-selection { 20 | background: DeepPink; 21 | color: white; 22 | } 23 | ``` 24 | 25 | ## Resources 26 | 27 | - https://css-tricks.com/almanac/selectors/s/selection/ 28 | -------------------------------------------------------------------------------- /articles/11-setting-default-parameters.md: -------------------------------------------------------------------------------- 1 | # Setting Default Parameters 2 | 3 | Super simple to set Default Parameters with ES6 👏‬ 4 | 5 | The old way was to use a ternary operator to assign the default value if it was undefined. 6 | 7 | With ES6, you can set the default value right inside the function parameters 🎉 8 | 9 | 10 | ```javascript 11 | // Old Way 12 | function coffeeOrTea(drink) { 13 | drink = drink !== undefined ? drink : '🍵'; 14 | } 15 | 16 | // ES6 Way 17 | function coffeeOrTea2(drink = '🍵') { 18 | 19 | } 20 | ``` 21 | 22 | ## Resources 23 | 24 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters 25 | -------------------------------------------------------------------------------- /articles-portugues/1-convertendo-um-array-like-para-um-array.md: -------------------------------------------------------------------------------- 1 | Translated by [@Mathias54](https://github.com/Mathias54) 2 | 3 | # Convertendo um Array-Like para um Array 4 | 5 | É incrível aprender algo novo no curso de ES6 do [@wesbos](https://twitter.com/wesbos) 🔥 6 | 7 | ```javascript 8 | const nodeList = document.querySelectorAll('ul li'); 9 | 10 | // Método 1: Converter para um array 11 | Array.from(nodeList); 12 | 13 | // Método 2: Converter para um array 14 | [...nodeList]; 15 | 16 | // Agora você pode usar map e outros métodos para loops 17 | ``` 18 | 19 | ## Resources 20 | 21 | - https://github.com/wesbos/es6-articles/blob/master/25%20-%20Array.from()%20and%20Array.of().md 22 | -------------------------------------------------------------------------------- /articles/4-declaring-css-variables.md: -------------------------------------------------------------------------------- 1 | # Declaring CSS Variables 2 | 3 | Move over Sass, we have CSS variables! 4 | 5 | I still love Sass of course. But it’s great native CSS supports this. 6 | ✅ No need for preprocessors & No more compiling! 7 | 8 | 9 | ```css 10 | :root { /* 1a. Global Scope */ 11 | --color: blue; 12 | } 13 | 14 | .fun { /* 1b. Lobal Scope */ 15 | --color: red; 16 | /* ☝️ only scoped to the .fun class */ 17 | color: var(--color); /* red */ 18 | } 19 | 20 | /* 2. Using CSS Variables */ 21 | div { 22 | color: var(--color); /* blue */ 23 | } 24 | ``` 25 | 26 | ## Resources 27 | 28 | - https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855 29 | -------------------------------------------------------------------------------- /articles-portugues/3-quando-nao-usar-arrow-function.md: -------------------------------------------------------------------------------- 1 | Translated by [@Mathias54](https://github.com/Mathias54) 2 | 3 | # Quando Não Utilizar Arrow Functions 4 | 5 | Arrow Functions são incríveis, porém não devem ser usados em todos as situações. Deve-se evitá-los em objetos porque o 'this' sempre estará referênciado o scopo pai -- que é o 'window', nesse caso. 6 | 7 | ```javascript 8 | const hamburger = { 9 | type: '🍔', 10 | comer: () => { // deveria ser usado o function() 11 | console.log(this) // 'this' referencia ao window, não ao hamburger 12 | } 13 | }; 14 | 15 | // Evite Arrow Functions em Objetos 16 | ``` 17 | 18 | ## Referências 19 | 20 | - https://wesbos.com/arrow-function-no-no/ 21 | -------------------------------------------------------------------------------- /articles-portugues/README.md: -------------------------------------------------------------------------------- 1 | # Code Notes in Português 2 | 3 | | Article| Translator| 4 | |--------|-----------| 5 | | [1: Convertendo um Array-Like para um Array](./1-convertendo-um-array-like-para-um-array.md) | [@Mathias54](https://github.com/Mathias54) | 6 | | [2: Console Table](./2-console-table.md)|[@Mathias54](https://github.com/Mathias54) | 7 | | [3: Quando Não Utilizar Arrow Functions](./3-quando-nao-usar-arrow-function.md)|[@Mathias54](https://github.com/Mathias54) | 8 | | [4: Declarando Variáveis CSS](./4-declarando-variaveis-css.md)|[@Mathias54](https://github.com/Mathias54) | 9 | | [5: Forma Rápido de Definir Métodos em Objetos ES6 ](./5-sintaxa-metodo-conciso.md)|[@Mathias54](https://github.com/Mathias54) | 10 | -------------------------------------------------------------------------------- /articles/14-combine-multiple-arrays-using-spread.md: -------------------------------------------------------------------------------- 1 | # Combine Multiple Arrays Using Spread 2 | 3 | Combine Multiple Arrays using ES6 Spread ‬🤩 4 | 5 | Instead of using concat() to concatenate arrays, try using the spread syntax to combine multiple arrays into one flattened array👍 6 | 7 | 8 | ```javascript 9 | let veggie = ['🍅', '🥑']; 10 | let meat = ['🥓']; 11 | 12 | // Old Way 13 | let sandwich = veggie.concat(meat, '🍞'); 14 | console.log(sandwich); // [ '🍅', '🥑', '🥓', '🍞' ] 15 | 16 | // ES6 Way 17 | let sandwich2 = [...veggie, ...meat, '🍞']; 18 | console.log(sandwich2); // [ '🍅', '🥑', '🥓', '🍞' ] 19 | ``` 20 | 21 | ## Resources 22 | 23 | - https://davidwalsh.name/spread-operator 24 | - https://gist.github.com/yesvods/51af798dd1e7058625f4 25 | -------------------------------------------------------------------------------- /articles/9-trick-to-add-string-and-number.md: -------------------------------------------------------------------------------- 1 | # Trick to Adding String and Number 2 | 3 | The unary + operator is a shortcut to convert a string into a number 🤩 4 | 5 | Problem: Adding strings that contain numbers does NOT add them. Instead, the strings are concatenated ❌ 6 | 7 | Solution: Convert the string into a number. Then you can calculate the sum ✅ 8 | 9 | 10 | ```javascript 11 | const string = "100"; 12 | const number = 5; 13 | 14 | // This doesn't return the sum, it's concatentated 15 | console.log(string + number) // 1005 16 | 17 | // Prepend string with "+" to calculate the sum 18 | console.log(+string + number) // 105 19 | ``` 20 | 21 | ## Resources 22 | 23 | - https://medium.com/@nikjohn/cast-to-number-in-javascript-using-the-unary-operator-f4ca67c792ce 24 | -------------------------------------------------------------------------------- /articles/2-console-table.md: -------------------------------------------------------------------------------- 1 | # Use `console.table` to display your data 2 | 3 | This is a cool way to display your data in your browser dev tools. Works great with Array and Objects. Instead of `console.log`, try `console.table` next time ⭐️ 4 | 5 | ```javascript 6 | const amazingAthletes = [ 7 | { 8 | firstName: "Ronda", 9 | lastName: "Rousey", 10 | sport: "🥊" 11 | }, 12 | { 13 | firstName: "Chloe", 14 | lastName: "Kim", 15 | sport: "🏂" 16 | }, 17 | { 18 | firstName: "Tessa", 19 | lastName: "Virtue", 20 | sport: "⛸" 21 | }, 22 | { 23 | firstName: "Hayley", 24 | lastName: "Wickenheiser", 25 | sport: "🏒" 26 | } 27 | ]; 28 | 29 | console.table(amazingAthletes); 30 | ``` 31 | 32 | ![Console Table](/images/2-console-table.png) 33 | -------------------------------------------------------------------------------- /articles-portugues/4-declarando-variaveis-css.md: -------------------------------------------------------------------------------- 1 | Translated by [@Mathias54](https://github.com/Mathias54) 2 | 3 | # Declarando Variáveis CSS 4 | 5 | Supere o Sass, nós temos variáveis CSS! 6 | 7 | Eu ainda amo Sass, claro. Porém é incrível que o css nativo suporta isso. 8 | ✅ Não existe a necessidade de preprocessadores e compilação. 9 | 10 | ```css 11 | :root { /* 1a. Escopo Global */ 12 | --color: blue; 13 | } 14 | 15 | .fun { /* 1b. Escopo Local */ 16 | --color: red; 17 | /* ☝️ Escopo definido apenas para a classe .fun */ 18 | color: var(--color); /* red */ 19 | } 20 | 21 | /* 2. Usando variáveis CSS */ 22 | div { 23 | color: var(--color); /* blue */ 24 | } 25 | ``` 26 | 27 | ## Referências 28 | 29 | - https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855 30 | -------------------------------------------------------------------------------- /articles/15-4-ways-to-combine-strings.md: -------------------------------------------------------------------------------- 1 | # 4 Ways to Combine Strings 2 | 3 | Happy Mother’s Day 🌷 4 | 5 | 4 ways to combine strings in JavaScript. My favourite way is using ES6’s Template Strings. Why? Because it’s more readable, no backslash to escape quotes, and no more messy plus operators. 6 | 7 | ```js 8 | const mom = '🌷'; 9 | 10 | // ES6's Template Strings 11 | const templateString = `Happy Mother's Day ${mom}`; 12 | 13 | // join() Method 14 | const joinMethod = ['Happy', 'Mother\'s', 'Day', mom].join(' '); 15 | 16 | // Concat() Method 17 | const concatMethod = "".concat('Happy ', 'Mother\'s ', 'Day ', mom); 18 | 19 | // + Operator 20 | const plusOperator = 'Happy Mother\'s Day ' + mom; 21 | ``` 22 | 23 | ## Resources 24 | 25 | - [MDN Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 26 | -------------------------------------------------------------------------------- /articles-portugues/2-console-table.md: -------------------------------------------------------------------------------- 1 | Translated by [@Mathias54](https://github.com/Mathias54) 2 | 3 | # Use o `console.table` para mostrar seus dados 4 | 5 | Isso é muito melhor do que exibir os seus dados no dev tools do navegador. Funciona muito bem com Arrays e Objetos. Invés de usar o `console.log`, tente o `console.table` na próxima vez ⭐️ 6 | 7 | ```javascript 8 | const atletasIncriveis = [ 9 | { 10 | nome: "Ronda", 11 | sobreNome: "Rousey", 12 | esporte: "🥊" 13 | }, 14 | { 15 | nome: "Chloe", 16 | sobreNome: "Kim", 17 | esporte: "🏂" 18 | }, 19 | { 20 | nome: "Tessa", 21 | sobreNome: "Virtue", 22 | esporte: "⛸" 23 | }, 24 | { 25 | nome: "Hayley", 26 | sobreNome: "Wickenheiser", 27 | esporte: "🏒" 28 | } 29 | ]; 30 | 31 | console.table(atletasIncriveis); 32 | ``` 33 | 34 | ![Console Table](/images/2-console-table.png) 35 | -------------------------------------------------------------------------------- /articles/10-remove-array-duplicates-using-set.md: -------------------------------------------------------------------------------- 1 | # Remove Array Duplicates Using ES6 Set 2 | 3 | Remove Array Duplicates using ES6 Set. 4 | 5 | “Set” is a data structure that stores unique values. It doesn’t allow you to add duplicates. This makes it ideal for us to use to remove duplicates from an Array. BUT, Set is not an array, that’s why we need to convert the Set back into an Array in order to use array methods such as .map or .reduce 6 | 7 | 1. Remove duplicates using “new Set” 8 | 2. Convert it back to an array using “Array.from” 9 | 10 | 11 | ```javascript 12 | const duplicates = [1,2,3,4,4,1]; 13 | 14 | const uniques = Array.from(new Set(duplicates)); 15 | 16 | console.log(uniques) // [1,2,3,4,1] 17 | ``` 18 | 19 | Alternatively, you can use the spread operator to convert the Set to an Array. 20 | 21 | ```javascript 22 | const duplicates = [1,2,3,4,4,1]; 23 | 24 | const uniques = [...new Set(duplicates)]; 25 | 26 | console.log(uniques) // [1,2,3,4,1] 27 | ``` 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/git,macos,windows 3 | 4 | ### Git ### 5 | *.orig 6 | 7 | ### macOS ### 8 | *.DS_Store 9 | .AppleDouble 10 | .LSOverride 11 | 12 | # Icon must end with two \r 13 | Icon 14 | 15 | # Thumbnails 16 | ._* 17 | 18 | # Files that might appear in the root of a volume 19 | .DocumentRevisions-V100 20 | .fseventsd 21 | .Spotlight-V100 22 | .TemporaryItems 23 | .Trashes 24 | .VolumeIcon.icns 25 | .com.apple.timemachine.donotpresent 26 | 27 | # Directories potentially created on remote AFP share 28 | .AppleDB 29 | .AppleDesktop 30 | Network Trash Folder 31 | Temporary Items 32 | .apdisk 33 | 34 | ### Windows ### 35 | # Windows thumbnail cache files 36 | Thumbs.db 37 | ehthumbs.db 38 | ehthumbs_vista.db 39 | 40 | # Folder config file 41 | Desktop.ini 42 | 43 | # Recycle Bin used on file shares 44 | $RECYCLE.BIN/ 45 | 46 | # Windows Installer files 47 | *.cab 48 | *.msi 49 | *.msm 50 | *.msp 51 | 52 | # Windows shortcuts 53 | *.lnk 54 | 55 | 56 | # End of https://www.gitignore.io/api/git,macos,windows 57 | 58 | /template.md 59 | -------------------------------------------------------------------------------- /translation_contribution_guide.md: -------------------------------------------------------------------------------- 1 | # Translation Contribution Guide 2 | 3 | First, THANK YOU for wanting to translate my articles 💛 4 | 5 | ## Folder Name 6 | 7 | If there is not an existing articles folder that contain language. Please go ahead and create one! 8 | 9 | ```bash 10 | articles-[language] 11 | ``` 12 | 13 | ## File Name 14 | 15 | Please prefix your translated file with the same number as the original. That way it will be easier to find 👍 16 | 17 | ```bash 18 | # Original name 19 | 📁articles 20 | 📝 1-convert-to-true-array.md 21 | 22 | # Translated (exact) 23 | 📁articles-chinese 24 | 📝 1-convert-to-true-array.md 25 | 26 | # OR translated 27 | 📁articles-portugues 28 | 📝 1-convertendo-um-array-like-para-um-array.md 29 | ``` 30 | 31 | ## Article 32 | 33 | Absolutely, please credit yourself if you wrote the translation ⭐️To keeps things consistent. Please put this right before your article markdown: 34 | 35 | ```code 36 | Translated by [your github username](link to your github account) 37 | 38 | // ...then paste your translated article markdown 39 | ``` 40 | 41 | Here is a an example of a [translated article](articles-portugues/1-convertendo-um-array-like-para-um-array.md) 42 | -------------------------------------------------------------------------------- /articles/27-css-user-select.md: -------------------------------------------------------------------------------- 1 | # CSS User Select 2 | 3 | Control your Text Selection with CSS 🎉 4 | 5 | It’s been awhile since my last CSS tidbit, so here it is 😄 You can use `user-select` to disable text selection (user-select: none). Or you can make it super simple for user to select the text with just one click (user-select: all). This is useful if you’re trying to create an easy text copy & paste experience 👍 6 | 7 | ```css 8 | /* Select all text with just ONE click */ 9 | p { 10 | user-select: all; 11 | } 12 | 13 | /* Disable text selection */ 14 | p { 15 | user-select: none; 16 | } 17 | ``` 18 | 19 | ### Vendor Prefixes 20 | 21 | Don't forget your vendor prefixes: 22 | 23 | ```css 24 | -webkit-user-select 25 | -moz-user-select 26 | -ms-user-select 27 | ``` 28 | 29 | Note: this is an experimental technology. So check the [Browser compatibility table](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Browser_compatibility) before using it in production. 30 | 31 | ### Custom CSS Selection Styling 32 | 33 | For those wondering how I got the pink highlight. It's using CSS selection styling. See my previous post about it. 34 | 35 | [CSS Tidbit- Custom CSS Selection Styling](http://www.samanthaming.com/tidbits/6-custom-css-selection-styling) 36 | 37 | 38 | ## Community Input 39 | 40 | ### Using `user-select` with buttons 41 | 42 | **CJ J.**: I find myself using `user-select: none;` a lot for buttons and other elements where highlighting the text doesn't make sense. Alternatively this can be achieved by putting the text inside the `content: '';` property of a `::before` or `::after` CSS pseudo element. 43 | 44 | _Thanks: [CJ J](https://www.linkedin.com/in/~cj-johnson)._ 45 | 46 | ## Resources 47 | 48 | - [MDN Web Docs: user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) 49 | - [CSS Tricks: user-select](https://css-tricks.com/almanac/properties/u/user-select/) 50 | -------------------------------------------------------------------------------- /articles/75-centering-elements-with-flexbox.md: -------------------------------------------------------------------------------- 1 | # Centering Elements with Flexbox 2 | 3 | The biggest CSS headache is "How do I vertically center something". Throw away your migraine pills, it's now been solved with Flexbox! 4 | 5 | ```css 6 | .parent { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | ``` 12 | 13 | Keeping this code note super short. Because I'll be spending the entire next month posting about Flexbox on my [Twitter](https://twitter.com/samantha_ming) and [Instagram](https://www.instagram.com/samanthaming/) Account! 14 | 15 | The series is called **#Flexbox30**. You will learn flexbox in 30 days with 30 code tidbits. You heard that right, a new code tidbit every day for 30 days 💪 It starts September 1st 🔥 16 | 17 | If you're interested in this FREE series, make sure you follow me on: 18 | 19 | - Instgram > [@samanthaming](https://www.instagram.com/samanthaming/) 20 | - Twitter > [@samantha_ming](https://twitter.com/samantha_ming) 21 | 22 | ## Flexbox with Auto Margins 23 | 24 | You can also achieve the same outcome by using auto margin! 25 | 26 | ```css 27 | .parent { 28 | display: flex; 29 | } 30 | .child { 31 | margin: auto; 32 | } 33 | ``` 34 | 35 | This is new for me. If you're interested to learn more about this. Here are some great resources: 36 | 37 | - [Flexbox's Best-Kept Secret](https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6) 38 | - [The peculiar magic of flexbox and auto margins](https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/) 39 | - [Stack Overflow: Why are there no "justify-items" and "justify-self" properties?](https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609#33856609) 40 | - [Stack Overflow: Can't scroll to top of flex item that is overflowing container](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) 41 | -------------------------------------------------------------------------------- /articles/37-dynamic-property-name-with-es6.md: -------------------------------------------------------------------------------- 1 | # How to Set Dynamic Property Keys with ES6 🎉 2 | 3 | Previously, we had to do 2 steps - create the object literal and then use the bracket notation. With ES6, you can now directly use a variable as your property key in your object literal. YAY! 👏 4 | 5 | ```javascript 6 | let cake = '🍰'; 7 | 8 | // ❌ Old way requires 2 steps 9 | let pan = { 10 | id: 1, 11 | }; 12 | pan[cake] = '🥞'; 13 | 14 | // ✅ YAY, much easier with ES6 15 | let pan = { 16 | id: 1, 17 | [cake]: '🥞' 18 | }; 19 | ``` 20 | 21 | ## The 3 ways to access the object value 22 | 23 | We can output the object value by passing in the appropriate key. Because I used emoji as the key in my example, it's a bit tricky. So let's look at a easier example. 24 | 25 | ```javascript 26 | let me = { 27 | name: 'samantha' 28 | }; 29 | 30 | // 1. Dot notation 31 | me.name // samantha 32 | 33 | // 2. Bracket notation (string key) 34 | me['name']; // samantha 35 | 36 | // 3. Bracket notation (variable key) 37 | let key = 'name' 38 | me[key]; // samantha 39 | ``` 40 | 41 | ### How to Access Object Value With Emoji Keys 42 | 43 | Alright back to our emoji example. Let's take a look at the output. 44 | 45 | ```javascript 46 | let cake = '🍰'; 47 | 48 | let pan = { 49 | [cake]: '🥞' 50 | }; 51 | 52 | // Output -> { '🍰': '🥞' } 53 | ``` 54 | 55 | Unfortunately, when you're using an Emoji as a key, you won't be able to use the dot notation. You're limited to the Bracket Notation. 56 | 57 | ```javascript 58 | // 2. Bracket notation (string key) 59 | pan['🍰']; // '🥞' 60 | 61 | // 3. Bracket notation (variable key) 62 | let key = '🍰' 63 | me[key]; // '🥞' 64 | ``` 65 | 66 | ## Resources 67 | 68 | - [MDN Web Docs - Computed Property Names](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) 69 | - [w3schools: JavaScript Properties](https://www.w3schools.com/js/js_object_properties.asp) 70 | -------------------------------------------------------------------------------- /articles/13-skip-values-in-destructuring.md: -------------------------------------------------------------------------------- 1 | # Skip Values In Destructuring 2 | 3 | Skip Values in Destructuring 🎉 4 | 5 | You can use blanks to skip over unwanted values. 6 | 7 | This way you can avoid useless variable assignments for values you don’t want during destructuring 👍 8 | 9 | ```javascript 10 | // Ugh, useless variable assignments 11 | let [a,b,c] = ['ignore', 'ignore', 'keep']; 12 | console.log(a, b, c); // ignore ignore keep 13 | 14 | // Use blanks to skip over unwanted values 15 | let [ , , c2] = ['ignore', 'ignore', 'keep']; 16 | console.log(c2); // keep 17 | ``` 18 | 19 | ## Community Suggestions 20 | 21 | ### Use Comments to Improve Code Readability 22 | 23 | You can use comments within the blank spaces to make your code more readable. 24 | This will help communicate to your fellow developers that you are intentionally skipping over the unwanted values. 25 | 26 | _Thanks: [@sulco](https://twitter.com/sulco/status/990952399060832257)_ 27 | 28 | ```js 29 | let [ 30 | chili, 31 | , // rotten 32 | , // rancid 33 | apple, 34 | olive 35 | ] = ['chili', 'rotten', 'rancid', 'apple', 'olive']; 36 | 37 | // OR 38 | 39 | let [chili, /*rotten*/, /*rancid*/, c] = ['chili', 'rotten', 'rancid', 'keep', 'olive']; 40 | ``` 41 | 42 | ## Community Examples 43 | 44 | ### Parsing data from `split()` 45 | 46 | Parsing comma-deliminated data and grabbing only what you need. 47 | 48 | _Thanks: [@SamHulick](https://twitter.com/SamHulick)_ 49 | 50 | ```js 51 | const tooMuchData = '33871,LOC,type1,99.27,FN'; 52 | const [, , , price] = tooMuchData.split(','); 53 | 54 | console.log(price); // 99.27 55 | ``` 56 | 57 | ## Resources 58 | 59 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Ignoring_some_returned_values 60 | 61 | - http://untangled.io/advanced-es6-destructuring-techniques/ 62 | 63 | - https://stackoverflow.com/questions/46775128/how-can-i-ignore-certain-returned-values-from-array-destructuring 64 | 65 | - http://2ality.com/2015/01/es6-destructuring.html 66 | -------------------------------------------------------------------------------- /articles/28-check-if-string-contains-substring.md: -------------------------------------------------------------------------------- 1 | # Checking if String contains Substring 2 | 3 | You can now use the ES6 `includes()` method to check if a strings contains a substring. It will determine whether that string exists in another string, returning either true or false 🤓 4 | 5 | ```javascript 6 | const word = "sunny"; 7 | 8 | // Old way 9 | word.indexOf('sun') !== -1; // true 10 | 11 | // ✅ ES6 way 12 | word.includes('sun'); // true 13 | ``` 14 | 15 | ## Case-Sensitive 16 | 17 | Note the comparison is case-sensitive. 18 | 19 | ```javascript 20 | 'sunny'.includes('SUN'); // false 21 | 22 | 'sunny'.includes('Sun'); // false 23 | ``` 24 | 25 | ## Array `includes()` 26 | 27 | The `includes()` can also be applied on arrays. You can use it to check if a certain element is in an array. It will either `true` or `false`. 28 | 29 | ```javascript 30 | const weather = ['sun', 'rain', 'cloudy']; 31 | 32 | weather.includes('sun'); // true 33 | ``` 34 | 35 | ## Community Input 36 | 37 | ### Check if node is a descendant of a specified node 38 | 39 | If you're checking if a node is a descendant of a specified node, you can use the `contains()` method. The descendant can be a child, grandchild, great-grandchild, etc. 40 | 41 | _[@__offblack](https://www.instagram.com/__offblack/):_ When we want to check if a document element contains a particular CSS class; we would use el.classList.contains('class-name') the contains function behaves like the includes function on a DOM elements classList. Helps a long way when making decisions on toggling classes, etc through vanilla JS 42 | 43 | ```javascript 44 | const span = document.querySelector('span'); 45 | document.querySelector('div').contains(span); 46 | ``` 47 | 48 | ### Performance Test: `indexOf` vs `includes` 49 | 50 | Thanks Filip for creating these test cases. If you're interested in knowing the speed test for how these methods fair in different browser, check out the link. 51 | 52 | [https://jsperf.com/unggzpaz](https://jsperf.com/unggzpaz) 53 | 54 | ## Resources 55 | 56 | - [Alligator.io - String Method in JS](https://alligator.io/js/includes-string-method/) 57 | - [MDN Web Docs - String.prototype.includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) 58 | -------------------------------------------------------------------------------- /articles/29-check-if-number-is-positive-or-negative.md: -------------------------------------------------------------------------------- 1 | # How to Check if Number is Negative or Positive 2 | 3 | How to check if Number is Negative or Positive 🤩 4 | 5 | Determining the sign of a number is super easy now with ES6's Math.sign 👏 It will indicate whether the number is positive, negative or zero. 6 | 7 | ```javascript 8 | const num = -8; 9 | 10 | // Old Way 11 | num === 0 ? num : (num > 0 ? 1 : -1); // -1 12 | 13 | // ✅ ES6 Way 14 | Math.sign(num); // -1 15 | ``` 16 | 17 | Note, the argument passed to this function will be converted to `number` type implicitly. 18 | 19 | ### Return Value 20 | 21 | `Math.sign()` has 5 possible return values: 22 | 23 | ```javascript 24 | 1 // positive number 25 | -1 // negative number 26 | 0 // positive zero 27 | -0 // negative zero 28 | NaN // not a number 29 | ``` 30 | 31 | ### Examples 32 | 33 | ```javascript 34 | Math.sign(8); // 1 35 | Math.sign(-8); // -1 36 | 37 | Math.sign(0); // 0 38 | Math.sign(-0); // -0 39 | 40 | Math.sign(NaN); // NaN 41 | Math.sign('hello'); // NaN 42 | Math.sign(); //NaN 43 | ``` 44 | 45 | ### A Common Gotcha of `Math.sign` 46 | 47 | A common gotcha is thinking that `Math.sign` return the converted argument value. `Math.sign` returns only the sign of a number. It doesn't return the value. 48 | 49 | ```javascript 50 | Math.sign(-8); 51 | 52 | // ✅ return -1 53 | // ❌ It doesn't return -8 54 | ``` 55 | 56 | ### Negative Zero 57 | 58 | What the heck is this negative zero 🤨. Kyle Simpson of "You Don't Know JS" explains it the best: 59 | 60 | > Now, why do we need a negative zero, besides academic trivia? 61 | 62 | > There are certain applications where developers use the magnitude of a value to represent one piece of information (like speed of movement per animation frame) and the sign of that number to represent another piece of information (like the direction of that movement). 63 | 64 | > In those applications, as one example, if a variable arrives at zero and it loses its sign, then you would lose the information of what direction it was moving in before it arrived at zero. Preserving the sign of the zero prevents potentially unwanted information loss. 65 | 66 | _[YDKJS - Type & Grammer - Zeros](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#zeros)_ 67 | 68 | ## Resources 69 | 70 | - [MDN Web Docs - Math.sign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign) 71 | -------------------------------------------------------------------------------- /articles/20-extract-arguments-using-array-destructure.md: -------------------------------------------------------------------------------- 1 | # Extracting Arguments using Array Destructure 2 | 3 | Happy Father’s Day! 4 | 5 | Array Destructuring is terrific at extracting value from your arguments. So the next time you see the array bracket notation, just swap them out and use array destructuring syntax instead 🎉 6 | 7 | 8 | ```javascript 9 | function sendLove(...args) { 10 | 11 | // ❌ Old way 12 | const hug = args[0]; 13 | const gift = args[1]; 14 | 15 | // ✅ Better way using Array Destructure 16 | const [icon, gift] = args; 17 | } 18 | 19 | sendLove('🤗', '🎁') 20 | ``` 21 | 22 | The first thing we’re doing is spreading our arguments, so you can get an array. Next we’re assigning them to our variables using array destructuring. 23 | 24 | ```javascript 25 | // Step 1: 26 | (...args) 27 | args // [ '🤗', '🎁' ] 28 | 29 | 30 | // Step 2: 31 | const [icon, gift] = args; 32 | 33 | icon // '🤗' 34 | gift // '🎁' 35 | ``` 36 | 37 | ## Understanding the `arguments` Object 38 | 39 | There's been some confusion on the syntax. I think it's because of the arguments objects. So I'm going to try to explain it. In every function, there is a built in `arguments` object. The `arguments` object is an Array-like object that corresponds to the arguments passed into a function. 40 | 41 | ```javascript 42 | function sendLove() { 43 | 44 | console.log(arguments); // { 0: '🤗', 1: '🎁' } 45 | } 46 | 47 | sendLove('🤗', '🎁') 48 | ``` 49 | 50 | As you can see the `arguments` is not an array. That's why in "Step 1", I'm using the `...` spread syntax to convert it to a real array. So this is essentially what I'm doing: 51 | 52 | ```javascript 53 | function sendLove(...args) { 54 | } 55 | 56 | // Same as 57 | 58 | function sendLove() { 59 | var args = [...arguments]; 60 | console.log(args) // [ '🤗', '🎁' ] 61 | } 62 | ``` 63 | 64 | That's why I can name it whatever I want: 65 | 66 | ```javascript 67 | function sendLove(...hello) { 68 | console.log(hello); // [ '🤗', '🎁' ] 69 | } 70 | ``` 71 | 72 | Read more about the `arguments` object here: 73 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments 74 | 75 | 76 | ## Resources 77 | 78 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring 79 | - http://www.deadcoderising.com/2017-03-28-es6-destructuring-an-elegant-way-of-extracting-data-from-arrays-and-objects-in-javascript/ 80 | - https://gist.github.com/mikaelbr/9900818 81 | - https://dev.to/sarah_chima/destructuring-assignment---arrays-16f 82 | -------------------------------------------------------------------------------- /articles/41-no-useless-escape.md: -------------------------------------------------------------------------------- 1 | # Improve Readability with ES6 Template Strings 2 | 3 | Yay, no more backslash `\` to escape characters in strings! A better way is to use template strings with backticks ( ` ). This makes your string so much more readable, don’t you think 👏 4 | 5 | If you use the eslint linter in your code, this is under the “no-useless-escape” rule 🤓 6 | 7 | ```javascript 8 | // Old way 9 | const messy = 'No useless \\ (backslash) to escape "" \'\''; 10 | 11 | // ✅ ES6 way 12 | const better = `No useless \ (backslash) to escape "" ''`; 13 | 14 | // Same result 15 | console.log(messy === better); // true 16 | ``` 17 | 18 | ### Improve Readability with String Interpolation 19 | 20 | Another awesome feature of the template strings, is when you want to include a variable within the strings. No more messy `+` concatenation. 21 | 22 | ```javascript 23 | const weather = "☀️"; 24 | 25 | // Old way 26 | const messy = "Today is a " + weather + "!"; 27 | 28 | // ✅ ES6 way 29 | const better = `Today is a ${weather} day!`; 30 | 31 | // Same result 32 | console.log(messy === better); // true 33 | ``` 34 | 35 | ### ESLint: no-useless-escape 36 | 37 | ESLint or any linter is like a spell checker in a word document. It goes through your code and let you know when you made a mistake. 38 | 39 | But the challenging thing about code, is that it’s quite subjective. So unlike a spelling error, there is no hard defined rule what is right and wrong. Instead the rules are set by you. But does the mean you need to go rule by rule and adjust it. Not at all, there are tons of community eslint rules that you can use instead of setting your own. And if don’t agree with any particular one, you can easily adjust them. Some popular ones include AirBnB, Google, or just use ESLint recommended one rules. 40 | 41 | This is how you can turn on the `no-useless-escape` rule: 42 | 43 | _.eslintrc_ 44 | 45 | ```javascript 46 | { 47 | "rules": { 48 | "no-useless-escape": "2" 49 | } 50 | } 51 | ``` 52 | 53 | The options you can pass in are: 54 | 55 | - "off" or 0 👉 turn the rule off 56 | - "warn" or 1 👉 turn the rule on as a warning 57 | - "error" or 2 👉 turn the rule on as an error 58 | 59 | 60 | 61 | ## Resources 62 | 63 | - [MDN Web Docs - Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 64 | - [ESLint: no-useless-escape](https://eslint.org/docs/2.13.1/rules/no-useless-escape) 65 | - [ESLint: Configuring ESLint](https://eslint.org/docs/user-guide/configuring) 66 | - [Airbnb ESLint Config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) 67 | - [Google ESLint config](https://github.com/google/eslint-config-google) 68 | -------------------------------------------------------------------------------- /articles/36-bad-variable-names-to-avoid.md: -------------------------------------------------------------------------------- 1 | # Bad Variable Names to Avoid 🙅‍♀️ 2 | 3 | In an earlier post, I mentioned [how you can give your boolean variables a better name](https://www.samanthaming.com/tidbits/34-better-boolean-variable-names) by prefixing it with is/has/can. Now I want to give advice on bad variable names you should avoid 💥 4 | 5 | Reading code is tough already, so don’t make it even more complicated by using names that they have to guess. Your code should convey understanding. So it’s better to use words that everyone can understand. This will make it a lot easier for others and even yourself to work with your code. Yay! Win Win 😊 6 | 7 | ```javascript 8 | // Avoid Single Letter Names 9 | let n = 'use name instead' 10 | 11 | // Avoid Acronyms 12 | let cra = 'no clue what this is' 13 | 14 | // Avoid Abbreviations 15 | let cat = 'cat or category??' 16 | 17 | // Avoid Meaningless Names 18 | let foo = 'what is foo??' 19 | ``` 20 | 21 | ## Community Feedback 22 | 23 | - _[@avi.codes](https://www.instagram.com/avi.codes/):_ Using camelCase while naming variables and UPPERCASE while naming constants. 24 | 25 | - _[@jonashavers](https://www.instagram.com/jonashavers/):_ That's always better than feeling the need to add a comment to describe what you mean and what the variable is used for. The goal is: "don't make me think" 26 | 27 | ### Navigate your Code Base with Better Variable Names 28 | 29 | Having a good descriptive name also make searching and finding a lot easier in a large code base 💯 30 | 31 | - _[@agm1984](https://twitter.com/agm1984/status/1048670897895141376):_ I subscribe to the idea that, just because you can make your names short doesn't mean you should. You might open a 200 line file to line 175, see `this.toggle()` and be like, toggle what? Nothing beats a good keyword search that finds only 2-5 matches in 2 files instead of like 29 matches in 18 files. 32 | 33 | ```javascript 34 | // Bad 35 | const toggle = () => {} 36 | 37 | // Good 38 | const toggleCountrySelector = () => {} 39 | ``` 40 | 41 | _Thanks: [@agm1984](https://twitter.com/agm1984/status/1048670897895141376)_ 42 | 43 | 44 | ## Resources 45 | 46 | - [Be Expressive: How to Give Your Variables Better Names](https://spin.atomicobject.com/2017/11/01/good-variable-names/) 47 | - [The art of naming variables](https://hackernoon.com/the-art-of-naming-variables-52f44de00aad) 48 | - [The Importance Of Naming In Programming](https://carlalexander.ca/importance-naming-programming/) 49 | - [More on JavaScript Variable Naming Conventions](https://www.htmlgoodies.com/html5/javascript/back-by-popular-demand-more-on-javascript-variable-naming-conventions.html) 50 | - [JavaScript naming convention](http://trungk18.github.io/experience/javascript-naming-convention/) 51 | -------------------------------------------------------------------------------- /articles/16-royal-wedding-default-param.md: -------------------------------------------------------------------------------- 1 | # Royal Wedding with Default Parameter 2 | 3 | Congratulations to the Duke and Duchess of Sussex! 4 | 5 | Will you take Harry to be your husband? I know the default is “I will”. Luckily with ES6, we can set a default parameter for the traditionalists😉. But for me, I would respond… "HECK YEAH 💋" !!! 😆 6 | 7 | ```javascript 8 | function marryMe(yes = 'I will') { 9 | console.log(yes); 10 | } 11 | 12 | marryMe(); // I will 13 | 14 | marryMe('HECK YEAH 💋'); // HECK YEAH 💋 15 | ``` 16 | 17 | ### Multiple Default Parameters 18 | 19 | You can also have multiple parameters with default values. 20 | 21 | ```javascript 22 | function marryMe(yes = 'I will', prince = 'Harry') { 23 | console.log(yes); 24 | console.log(prince); 25 | } 26 | 27 | marryMe(); 28 | // yes 29 | // Harry 30 | ``` 31 | 32 | ### Single String `console.log` Output 33 | 34 | You can print the the above line in one `console.log` statement. 35 | Just separate the value by a comma `,` 36 | 37 | ```javascript 38 | function marryMe(yes = 'I will', prince = 'Harry') { 39 | console.log(yes, prince); 40 | } 41 | 42 | marryMe(); // I will Harry 43 | ``` 44 | 45 | ### Skip Parameter with `undefined` 46 | 47 | If you want to skip over parameters and maintain the default values. You can pass `undefined` as the argument for the parameters you want to gloss over. 48 | 49 | ```javascript 50 | function marryMe(yes = 'I will', prince = 'Harry', title = 'Sussex') { 51 | console.log(yes, prince, title); 52 | } 53 | 54 | marryMe( 55 | undefined, 56 | undefined, 57 | 'Cambridge' 58 | ); // I will Harry Cambridge 59 | ``` 60 | 61 | ## Community Examples 62 | 63 | ### Multiple Default Parameters 64 | 65 | You can print all the default params in an object. 66 | 67 | ```js 68 | const person = (age = 29, gender = 'male', location = 'NC') => { 69 | console.log({age, gender, location}); 70 | } 71 | 72 | person(); 73 | // { age: 29, gender: 'male', location: 'NC' } 74 | ``` 75 | 76 | _Thanks: Brian R._ 77 | 78 |
79 | 80 | ☝️ The reason the above works is because it is utilizing ES6 enhanced object literal property value shorthand. When the property key matches the variable name, you can omit the variable name. 81 | 82 | ```javascript 83 | // Old Way 84 | console.log({ 85 | age: age, 86 | gender: gender, 87 | location: location 88 | }); 89 | 90 | // Using ES6 object literal property value shorthand 91 | console.log({ 92 | age, //: age, 93 | gender, //: gender, 94 | location,//: location 95 | }); 96 | ``` 97 | 98 | _Thanks: Emmanuel K._ 99 | 100 | 101 | ## Resources 102 | 103 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters 104 | -------------------------------------------------------------------------------- /articles/18-named-param-using-destructured-objects.md: -------------------------------------------------------------------------------- 1 | # Named Parameters using Destructured Objects 2 | 3 | Yay, Destructured Objects to the rescue 🎉 4 | 5 | Since JavaScript doesn’t natively support named parameters. This is a cool way around this issue. No more worrying about the specific order of inserting your arguments 👍 6 | 7 | 8 | ```javascript 9 | // Boo, arguments must be in specific order 10 | function meal(protein, carb, veggie){ 11 | } 12 | meal('🥩', '🍚', '🥦') 13 | 14 | 15 | // Yay, arguments can be in any order 16 | function meal2({protein, carb, veggie}){ 17 | } 18 | meal2({carb: '🍚', veggie: '🥦', protein: '🥩'}) 19 | ``` 20 | 21 |
22 | 23 | Here's how you can access the value within the function 24 | 25 | ```javascript 26 | function meal2({protein, carb, veggie}){ 27 | 28 | console.log(protein, veggie, carb); // 🥩 🥦 🍚 29 | } 30 | meal2({carb: '🍚', veggie: '🥦', protein: '🥩'}) 31 | ``` 32 | 33 | ### Add a Default to Safe Guard from Error 34 | 35 | If you forget to pass an argument to the function, you will get a `TypeError` 36 | 37 | ```javascript 38 | function meal2({protein, carb, veggie}){ 39 | } 40 | 41 | meal2(); // No Argument 42 | 43 | // This will throw a "TypeError: Cannot destructure property ..." 44 | ``` 45 |
46 | 47 | **Solution**: To solve this, you can set a default empty object, `{}`. So if you forget to pass an argument, you will get `undefined` instead. 48 | 49 | ```javascript 50 | function meal2({protein, carb, veggie} = {}){ // 👈 51 | } 52 | 53 | meal2(); // No Argument 54 | 55 | // This will return "undefined" 56 | ``` 57 | 58 | ### Combining with Default Parameters 59 | 60 | You can also set default parameter within the object. 61 | 62 | ```javascript 63 | function meal2({protein = 'protein', carb, veggie} = {}){ 64 | 65 | console.log( 66 | protein, // 'protein' 67 | veggie, // undefined 68 | carb // '🍚' 69 | ); 70 | } 71 | 72 | meal2({carb: '🍚'}) 73 | ``` 74 | 75 | ## Community Examples 76 | 77 | ### Combining with Optional Arguments 78 | 79 | **RanqueBenoit**: Great if some are optional arguments too! Also for default values. 80 | 81 | ```javascript 82 | function oneFunc(options = {}) { 83 | let defaults = { one: 1 }; 84 | options = { ...defaults, ...options }; 85 | 86 | return options.one; 87 | } 88 | 89 | oneFunc() // 1 90 | oneFunc({ }) // 1 91 | oneFunc({ one: 2 }) // 2 92 | ``` 93 | 94 | _Thanks: [@RanqueBenoit](https://twitter.com/RanqueBenoit/status/1002991906685583360)_ 95 | 96 | 97 | ## Resources 98 | 99 | - https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/ 100 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring 101 | -------------------------------------------------------------------------------- /articles/32-html-contenteditable.md: -------------------------------------------------------------------------------- 1 | # Make a HTML element editable with `contenteditable` ✨ 2 | 3 |
4 | 5 | Apply the `contenteditable` attribute to any HTML element. Voila! You can now edit them similar to how a `` or `