sandren

Tailwind CSS best practices

Utility classes

1. 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!

2. 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.

3. 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

simpsoka

Do I want to die on this hill?

• Pass: This is morally good and if not handled has long term consequences
• Fail: This if self serving

Am I including everyone?

• Pass: My ego is not driving this conversation
• Fail: The people in this conversation will only tell me I'm right and not push back

vielhuber

<template>
	<div :test="$helpers.foo1()" :test2="bar()"></div>
</template>

<script>
import { bar } from '@/helpers/utils';
</script>

chriscauley

/*
Removes the minimum leading whitespace for each line in a pre > code tag.
Also optionally escapes html if you include the "nuke-html" class
When writing HTML snippets for slides or blogs, it's a pain to have to do this:

        </div> <!-- original indentation level -->
<pre><code class="html">&lt;ul class="demo"&gt;
  &lt;li&gt;No order here&lt;/li&gt;
  &lt;li&gt;Or here&lt;/li&gt;
  &lt;li&gt;Or here&lt;/li&gt;

lukecav

// Expire events
if ($expireTransient = get_transient($post->ID) === false) {
	set_transient($post->ID, 'set for 1 minutes', 1 * MINUTE_IN_SECONDS );
	$today = date('Y-m-d H:i:s', current_time('timestamp', 0));
	$args = array(
		'post_type' => 'events',
		'posts_per_page' => 200,
		'post_status' => 'publish',
		'meta_query' => array(
			array(

noelvo

var zip = new JSZip();
var count = 0;
var zipFilename = "zipFilename.zip";
var urls = [
  'http://image-url-1',
  'http://image-url-2',
  'http://image-url-3'
];

urls.forEach(function(url){

deanhume

<script>
// Register the service worker
if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
    // registration failed :(
    	console.log('ServiceWorker registration failed: ', err);
    });