paulhhowells

ES6 imports and exports

// myThing.js

Default

export

export default function () {}

export default function myThing () {}

paulhhowells

// 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(() => { … })`.

paulhhowells

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' },

paulhhowells

{
	"parser": "babel-eslint",
	"parserOptions": {
		"ecmaFeatures": {
			"jsx": true,
			"modules": true
		}
	},
	"env": {
		"browser": true,

paulhhowells

VSCode shortcuts

⇧ shift
⌃ control
⌥ option
⌘ command

paulhhowells

.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

/*
	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';

paulhhowells

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

// FizzBuzz
// Terseness vs Readability

function fizzBuzz (value) {
  let output = '';

  if (value % 3 === 0) {
    output += 'Fizz';
  }

paulhhowells

camelCaseWord
kebab-case-word
PascalCaseWord
snake_case_word

lower case words
Sentence case words.
UPPER CASE WORDS