⇧ shift
⌃ control
⌥ option
⌘ command
Paul H Howells paulhhowells
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| atom-beautify | |
| highlight-selected | |
| language-arduino | |
| language-ino | |
| language-svg | |
| linter | |
| linter-ansible-syntax | |
| linter-csslint | |
| linter-eslint | |
| linter-js-yaml |
paulhhowells
/ cases
Created
September 12, 2016 19:25
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| camelCaseWord | |
| kebab-case-word | |
| PascalCaseWord | |
| snake_case_word | |
| lower case words | |
| Sentence case words. | |
| UPPER CASE WORDS |
paulhhowells
/ FizzBuzz.js
Last active
September 6, 2019 12:09
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // FizzBuzz | |
| // Terseness vs Readability | |
| function fizzBuzz (value) { | |
| let output = ''; | |
| if (value % 3 === 0) { | |
| output += 'Fizz'; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const notAlphaNumericUnderscoreNorWhitespace = /[^\w\s]/g; | |
| const whitespace = /\W+/g; | |
| function camelCase (string) { | |
| return string | |
| .trim() | |
| .replace(notAlphaNumericUnderscoreNorWhitespace, '') | |
| .split(whitespace) | |
| .map((string, index) => { | |
| return (index) |
paulhhowells
/ react_render_props_with_hooks_and_functional_components.js
Last active
August 1, 2019 20:15
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| react_render_props_with_hooks_and_functional_components.js | |
| Folk write that hooks replace render props, but here they are together! | |
| Why? Because this enables composition of components within mark-up/jsx that share props & state (that has been lifted up). | |
| In this example MyContainer and MyComponent may be reused within other components alongside a variety of extra components. | |
| i.e. MyComponent does not need to be placed within the jsx returned by MyContainer. | |
| */ | |
| import React, { useState } from 'react'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .widgets { | |
| box-sizing: border-box; | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| grid-gap: 0.5em; | |
| grid-auto-rows: minmax(4em, auto); | |
| } | |
| @media only screen and (min-width: 24em) { | |
| /* breakpoint min-width derived from grid-template-columns minmax 20em + .main padding 2em + a bit extra */ |
paulhhowells
/ .eslintrc
Created
May 11, 2020 21:49
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "parser": "babel-eslint", | |
| "parserOptions": { | |
| "ecmaFeatures": { | |
| "jsx": true, | |
| "modules": true | |
| } | |
| }, | |
| "env": { | |
| "browser": true, |
paulhhowells
/ useBreakpointWidth.js
Created
May 31, 2020 19:10
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import useBreakpointWidth from '../../hooks/useBreakpointWidth'; | |
| import './index.css'; | |
| const breakpointWidths = [ | |
| { width: 200, classNames: 'component-narrow' }, | |
| { width: 300, classNames: 'w-300' }, | |
| { width: 400, classNames: 'w-400' }, | |
| { width: 600, classNames: 'w-600' }, | |
| { width: 800, classNames: 'component--wide' }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Catching Errors | |
| /* | |
| Run this in a terminal with: node catching-errors.js | |
| https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await | |
| https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise | |
| https://javascript.info/promise-error-handling | |
| Promise executors and promise handlers have an 'invisible try…catch' around them. | |
| If an exception happens, it is caught and treated as a rejection. | |
| So reject are throw equivalent within `Promise((resolve, reject) => { … })` and `.then(() => { … })`. |