dgowrie

Assumptions:

1. Using Sass with & ampersand selector, limited nesting, and modular / partials-based file organization
2. Using BEM convention with limited nesting

Two lines of thought here:

1. Organize media queries to be "inline" i.e. colocated with the selectors.

• pro: close to the code, context is clear
• con: potentially lots of media query declarations scattered throughout the CSS file

dgowrie

UI testing - use data types for selectors

Add data-testid attributes to elements as dedicated UI test selectors that provide context and are resilient to changes.

--

Reasons data-* type selector are recommended and will help avoid brittle tests:

dgowrie

General Web Accessibility tips and tools

HTML Semantics

Good HTML semantics makes for good accessibility. This means using links, buttons, form elements, and labels appropriately, including:

• <label> element for form controls with appropriate for / htmlFor (React) and id pairings
• <fieldset> for groups of related inputs
• <button> elements for UI controls

More info on semantic HTML as basis for accessibility on this MDN article:

dgowrie

Just a collection of SQL queries I find useful in WordPress management

dgowrie

<snippet>
	<content><![CDATA[
/**
 * Boilerplate and "right way to test" examples:
 * https://medium.freecodecamp.org/the-right-way-to-test-react-components-548a4736ab22
 */
import React from 'react';
import { mount, shallow } from 'enzyme';

import ${1:${TM_FILENAME/(.+)\..+|.*/$1/:ComponentUnderTest}} from './${1:${TM_FILENAME/(.+)\..+|.*/$1/:ComponentUnderTest}}';

dgowrie

// SublimeLinter Settings - User
{
    "debug": true,

    "linters": {
        // https://github.com/SublimeLinter/SublimeLinter-eslint/issues/205
        // https://github.com/SublimeLinter/SublimeLinter/blob/master/docs/troubleshooting.rst#on-macos
        "eslint": {
            "disable": false,
            "args": [],

dgowrie

/**
 * Similar to Sass mixins
 * Goals are:
 * - intuitive, sensible naming convention for ranges
 * - declarative syntax
 * Two approaches explored...
 */
 

/* Breakpoints - if we want to keep these as separate variables (pros/cons) */

dgowrie

From: http://bocribbz.com/post/80417240179/nodejs-in-pythons-virtualenv

Virtualenv is very useful tool, it helps with isolation and solves some redundant administrative works. Node.js also has similar tools, but from them, one stands apart, nodeenv.

What is really great about nodeenv, is that it helps you avoid typing long source commands, and if you are used to virtualenvwrapper, you dont have to learn a new set of commands.

To install it you can follow these quick steps, after you have installed virtualenv and virtualenvwrapper.

dgowrie

@mixin transition-props($property: all) {
	transition-property: $property;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(.25,.46,.45,.94);

	@if ($property != 'opacity') and ($property != 'transform') {
		will-change: $property;
	}
}

dgowrie

React/Redux Style Guide

Table of Contents:

• React/Redux Style Guide
  • React Guidelines
    • Organization
    • Components
• Container Components