Reach UI is an accessible foundation for React applications and design systems.
The three equally important goals are to be:
- Accessible
- Composable
- Stylable
import { InjectedFormikProps, withFormik } from 'formik'; | |
import * as React from 'react'; | |
import * as Yup from 'yup'; | |
interface FormValues { | |
login: string; | |
} | |
interface FormProps { | |
login?: string; |
def colorize(text, color_code) | |
"\e[#{color_code}m#{text}\e[0m" | |
end | |
def red(text); colorize(text, 31); end | |
def green(text); colorize(text, 32); end | |
# Actual example | |
#puts 'Importing categories [ ' + green('DONE') + ' ]' | |
#puts 'Importing tags [' + red('FAILED') + ']' |
No need for homebrew or anything like that. Works with https://www.git-tower.com and the command line.
gpg --list-secret-keys
and look for sec
, use the key ID for the next stepgit
to use GPG -- replace the key with the one from gpg --list-secret-keys
This document is meant to be a brief "checklist" of things to setup for your Ember addon when beginning development in order to have the best possible architecture and workflow out of the gate. For more comprehensive material, the following are bookshelf-caliber:
Ember Addon Secrets - Written around the Ember 2.6 era, this article takes a much deeper dive into several of the topics mentioned here.
# In order for gpg to find gpg-agent, gpg-agent must be running, and there must be an env | |
# variable pointing GPG to the gpg-agent socket. This little script, which must be sourced | |
# in your shell's init script (ie, .bash_profile, .zshrc, whatever), will either start | |
# gpg-agent or set up the GPG_AGENT_INFO variable if it's already running. | |
# Add the following to your shell init to set up gpg-agent automatically for every shell | |
if [ -f ~/.gnupg/.gpg-agent-info ] && [ -n "$(pgrep gpg-agent)" ]; then | |
source ~/.gnupg/.gpg-agent-info | |
export GPG_AGENT_INFO | |
else |
module Sass::Script::Functions | |
def inline_svg_image(path, repl = nil) | |
real_path = File.join(Compass.configuration.images_path, path.value) | |
svg = data(real_path) | |
if repl && repl.respond_to?('to_h') | |
repl = repl.to_h | |
svg = svg.to_s | |
repl.each_pair do |k, v| |
The following are a few important npm packages.
Core Babel and access to Babel:
babel-core
: the core compilation machinery and plugin infrastructure for Babel. You will rarely need to install this package, because other packages such as babel-cli
have it as a dependency, meaning that it will be automatically installed when they are installed.
babel-cli
: a command line interface to Babel
. It includes the following commands:
babel-doctor
detects common problems with your Babel installation.
#!/usr/bin/env bash | |
# Use with arg $1 as --app or --addon and optional arg $2 as --backup to keep a copy of the original files | |
# | |
# Upgrade Ember-CLI dependencies from 1.13.8 to 1.13.13 | |
# | |
# - https://github.com/twokul/ember-cli-release-notes/commit/1cee41eb91bf7c534917fdd4cd42a1cd1a481c75 | |
# - https://github.com/ember-cli/ember-cli/releases/tag/v1.13.12 | |
# - https://github.com/ember-cli/ember-cli/releases/tag/v1.13.13 |
Sublime-Style-Column-Selection
Enable Sublime style 'Column Selection'. Just hold 'alt' while you select, or select using your middle mouse button. Also similar to Texmate's 'Multiple Carets', or BBEdit's 'Block Select'
activate-power-mode
Activate POWER MODE to write your code in style.
atom-alignment
A simple key-binding for aligning multi-line and multiple selections in Atom (Based on the sublime text plugin)