Thomas Klemm thomasklemm

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

'Users hate change'

This week NN Group released a video by Jakob Nielsen in which he attempts to help designers deal with the problem of customers being resistant to their new site/product redesign. The argument goes thusly:

Humans naturally resist change
Your change is for the better
Customers should just get used to it and stop complaining

There's slightly more to it than that, he caveats his argument with requiring you to have of course followed their best practices on product design, and allows for a period of customers being able to elect to continue to use the old site, although he says this is obviously only a temporary solution as you don't want to support both.

Moved to Shopify/graphql-design-tutorial

	# A base mutation that adds an errors field to all subclasses, and before resolving, it checks to make sure that the caller selected `errors`.
	#
	# (You could use `GraphQL::Schema::Mutation` as a base class, too.)
	class Mutations::BaseMutation < GraphQL::Schema::RelayClassicMutation
	# Add the errors field to all mutations
	field :errors, [Types::MutationError], null: false
	# Inject `lookahead` to the resolve method
	extras [:lookahead]

	def resolve_with_support(lookahead:, **kwargs)

	require "graphql"

	# A schema definition with field-level directives
	schema = GraphQL::Schema.from_definition <<-GRAPHQL
	type Query {
	totalScore: Int! @mock
	}

	type Mutation {
	incrementScore(by: Int = 1): Int! @mock(with: "SomeClassName")

	# ChromeDriver for JavaScript enabled feature/system specs
	#
	# Example usage:
	# `$ bin/rspec` # Chrome in Headless Mode (Default)
	# `$ SHOW_BROWSER=true bin/rspec` # Chrome
	# `$ SHOW_BROWSER=true DEVTOOLS=true bin/rspec` # Chrome with Devtools

	require 'selenium/webdriver'

	Capybara.register_driver :chrome do \|app\|

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	const hoverTime = 400
	const fetchers = {}
	const doc = document.implementation.createHTMLDocument('prefetch')

	function fetchPage (url, success) {
	const xhr = new XMLHttpRequest()
	xhr.open('GET', url)
	xhr.setRequestHeader('VND.PREFETCH', 'true')
	xhr.setRequestHeader('Accept', 'text/html')
	xhr.onreadystatechange = () => {

	import React from 'react'
	import { withRouter, Link } from 'react-router-dom'
	import { graphql, compose } from 'react-apollo'
	import { Formik } from 'formik'
	import Yup from 'yup'

	import FormWideError from '../elements/form/FormWideError'
	import TextInput from '../elements/form/TextInput'
	import Button from '../elements/form/Button'
	import { H2 } from '../elements/text/Headings'

	http://stackoverflow.com/questions/22667401/postgres-json-data-type-rails-query
	http://stackoverflow.com/questions/40702813/query-on-postgres-json-array-field-in-rails

	#payload: [{"kind"=>"person"}]
	Segment.where("payload @> ?", [{kind: "person"}].to_json)

	#data: {"interest"=>["music", "movies", "programming"]}
	Segment.where("data @> ?", {"interest": ["music", "movies", "programming"]}.to_json)
	Segment.where("data #>> '{interest, 1}' = 'movies' ")
	Segment.where("jsonb_array_length(data->'interest') > 1")