rachelslurs

Benefits

• Run eslint in the docker container
• Run jest in the docker container (and get updates when snapshots change)
• Much more, share your tips!

Instructions adapted from here

1. Install Remote development extension pack
2. In VSCode, control+shift+p, Remote-Containers: Add Development Container Configuration Files. Choose From 'docker-compose.yml'. This should create a folder .devcontainer which is .gitignored.
3. Edit the .devcontainer/devcontainer.json file. Ensuring a few different settings:

rachelslurs

# remove any existing things
sudo apt-get remove docker docker-engine docker.io containerd runc

# install docker engine

# add repo with trusted key
sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \

rachelslurs

<?php
    /*
    Plugin Name: Content Chopper
    Plugin URI: https://github.com/rachelslurs
    Description: A simple content chopper
    Version: 1.0
    Author: Rachel Cantor
    Author URI: https://github.com/rachelslurs
    License: GPL2
    */

rachelslurs

import React, {Component} from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import {FieldArray, getFormValues} from 'redux-form' // import the action creator you need
import CountryPicker from '../components/CountryPicker'

class CountriesContainer extends Component {
  
  constructor(props) {
    super(props)

rachelslurs

Using Atom with Semantic UI

I've been using Atom with Semantic UI and found some tweaks to be helpful when theming.

Getting the syntax for .variables and .overrides to default to LESS

1. Install the file-types package

2. Open the config folder and edit the config.cson file

3. Add a value in alphabetical order for "file-types", unless it's there already.

rachelslurs

Semantic UI React Quicklinks

Feel free to use in your README.md for easy access

Elements	Collections	Views	Modules	Behaviors	Addons
Button	Breadcrumb	Advertisement	Accordion	Behaviors	Confirm
Container	Form	Card	Checkbox		Portal
Divider	[Grid](https://react.semantic-u

rachelslurs

import React, {Component} from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import {reduxForm, change} from 'redux-form' // import the action creator you need
import CountryPicker from '../components/CountryPicker'

class CountriesContainer extends Component {
	static propTypes = {
		changeFieldValue: PropTypes.func.isRequired
	}

rachelslurs

import React, {Component} from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import {reduxForm, change} from 'redux-form' // import the action creator you need
import CountryPicker from '../components/CountryPicker'

class CountriesContainer extends Component {
	static propTypes = {
		changeFieldValue: PropTypes.func.isRequired
	}

rachelslurs

/**
 * Filters the next, previous and submit buttons.
 * Replaces the forms <input> buttons with <button> while maintaining attributes from original <input>.
 *
 * @param string $button Contains the <input> tag to be filtered.
 * @param object $form Contains all the properties of the current form.
 *
 * @return string The filtered button.
 */
add_filter( 'gform_next_button', 'input_to_button', 10, 2 );

rachelslurs

javascript:(function() {
    var a = document.getElementById('_post_meta_image_alt_text_0');
    if (a) {
        a.value = 'Some alt text';
    }
    var b = document.getElementById('_post_meta_image_desktop_0');
    if (b) {
        b.value = 'https://placehold.it/1400x600/003003/ffffff';
    }
    var c = document.getElementById('_post_meta_image_desktop_mobile_tile_0');