Artem osadasami

Enable Darkmode Variants in TailwindUI depending on OS / Browser Settings

To enable darkmode variants simply add the following lines to the theme/extend section of your tailwind config

screens: {
    'dark-mode': {'raw': '(prefers-color-scheme: dark)'},
},

This enables the dark-mode variant for your classes. You are now able to use dark-mode:bg-gray-900 on your site.

It's built for the Hugo static site generator, but could be adopted to function with any json index.

To see it in action, go to craigmod.com and press CMD-/ and start typing.

This gist will no longer be updated as the changelog will be on the official website.

A blog series for PHP developers working on larger-than-average Laravel projects

Written for projects with a development lifespan of six to twelve months, with a team of three to six developers working on them simultaneously.

When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

ALL INSTALLATIONS ASSUME YES WHEN PROMPTED, that's what -y does

This script can be copy paste to ssh as is. No hands installation. :-)

yum install zsh -y

	-# https://johnbeatty.co/2018/03/09/stimulus-js-tutorial-how-do-i-drag-and-drop-items-in-a-list/
	.grid--draggable{ 'data-controller': 'seating-plan',
	'data-seating-plan-endpoint': endpoint,
	'data-action': 'dragstart->seating-plan#onDragStart dragover->seating-plan#onDragOver dragenter->seating-plan#onDragEnter drop->seating-plan#onDrop dragend->seating-plan#onDragEnd' }
	- seating_plan.each do \|seat\|
	- if seat[:is_empty]
	.grid__item.grid__item--empty{ 'data-row': seat[:row],
	'data-col': seat[:col],
	style: "grid-row: #{seat[:row]}; grid-column: #{seat[:col]};",
	class: ('grid__item--border' if seat[:is_border]) }

	javascript:

	`
	WorkFlowy x 2
	=============

	- A browser Bookmarklet to give you a dual panel WorkFlowy view

	Features / Usage:

	#!/bin/sh

	rm -rf /usr/local/bin/sketchtool
	ln -s /Applications/Sketch.app/Contents/MacOS/sketchtool /usr/local/bin/sketchtool