David A. Lindahl austriker27

Preparation

The preparation of the migration should take place a few days in advance, based off the current TTL of the A record for the domain. To make sure everything runs smoothly I recommend doing this at least two days in advance.

Decrease the TTL of the DNS record to 300 in a few days in advance.
Create a new server with the server provisioner (i.e. Forge, Ploi)
- Make sure to set up the timezone correctly on the server
Create a new site on the new server
Create a new database + corresponding database user
Make sure you can connect to the database from your local machine over SSH

Tests run on a 2013 Macbook Pro with 2.8GHz Intel Core i7, 16 GB 1600 MHz DDR3 using Laravel Valet.

Statamic 2 with 5000 entries

On a template listing 10 posts sorted by date.

Concurrency 1

Tailwind CSS best practices

Utility classes

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

SSH config (on your local machine)

Host [name]
  HostName [floating_ip]
  User root
  IdentityFile ~/.ssh/[ssh_key]
  IdentitiesOnly yes

	<script data-turbo-eval="false">
	document.addEventListener('turbo:before-render', () => {
	let permanents = document.querySelectorAll('[data-turbo-permanent]')

	let undos = Array.from(permanents).map(el => {
	el._x_ignore = true

	return () => {
	delete el._x_ignore
	}

	{{# The outer wrapper grid as defined in tailwind.config.js. It makes sure all
	blocks on a page get evenly spaced without having to worry about margins or
	paddings. #}} {{ if page_builder }} {{ page_builder scope="block" }} {{ partial
	src="page_builder/{type}" }} {{ /page_builder }} {{ /if }}
	<div class="bg-accent-300 pb-14">
	<div
	id="content"
	class="container px-8 pt-12 mx-auto md:px-12"
	x-data="loadCollection()"
	>

	<?php // copy everything after this line

	Artisan::command('identify-duplicates', function () {
	$duplicates = [];
	$shouldFixDuplicates = $this->confirm('Should Duplicate IDs be replaced with fresh IDs?');

	$items = collect(\Illuminate\Support\Facades\File::allFiles(__DIR__.'/../content'))
	->filter(function ($file) {
	return $file->isFile();
	})

	<!--
	Shared because of this Tweet: https://twitter.com/iammarcthomas/status/1308507994334822400
	-->

	<div
	data-sales-vue
	v-bind:class="[{ finished: isFinished }, 'sales-popup', 'box']"
	>
	<a v-if="!isFinished" class="close" v-on:click="onClose">×</a>
	<h2 v-if="!isFinished">

	/*
	* This script fetches all color styles from a Figma team/document.
	*
	* Dependencies:
	*
	* - node-fetch
	*
	* Due to a limitation in the Figma /styles endpoint, we need to use a
	* document for actually using the colors in a color grid 🙄That's why
	* we're both fetching from /styles and /files below.

	/* Blend Modes
	========================================================================== */
	.mix-overlay { mix-blend-mode: overlay; }
	.mix-multiply { mix-blend-mode: multiply; }
	.mix-screen { mix-blend-mode: screen; }
	.mix-lighten { mix-blend-mode: lighten; }
	.mix-soft-light { mix-blend-mode: soft-light; }
	.mix-difference { mix-blend-mode: difference; }
	.mix-color { mix-blend-mode: color; }